Activate stylistic set of a webfont
-
Hey!
Does someone know how I can use the alternate glyphs of the webfont I use? I need to activate the stylistic set. But how do I do?
Thanks a lot, Anne -
Dear Anna
i believe at the moment with Lay Theme you cant upload an OTF. are you using this for your Alternate Glyphs?
Let me know and best wishes
Sincerely
Richard -
Hey Richard,
thanks a lot for your reply.
No, at the moment I’m using the WOFF. When I bought the web license I just got a WOFF and a TTF. I’ve also bought an OTF license, but it’s only for desktop use.When I bought it, I already asked if I can use the Open Type Features also with the Webfont. They gave me the following explanation and a hint for the settings:
"The web fonts contain the same OpenType features as the desktop fonts. This must be considered for the programming. The ›Stylistic Sets‹ can be addressed with the css command ›font-feature-settings:" ss0X "‹. -> https://helpx.adobe.com/de/fonts/using/open-type-syntax.html#ss##
Older browsers sometimes do not support this (screenshot), but almost all of the current and most popular browsers do.Do I need to activate the stylistic set in my Custom CSS?
Thanks a lot and best wishes, Anne
-
Dear Anne @annepohlmann
Yes you need to use CSS to tell the font to activate its alternative style set, for example here on a project i was doing recently:
._p-glyphs{ -moz-font-feature-settings: 'ss10'; -webkit-font-feature-settings: 'ss10'; font-feature-settings: 'ss10' on; }
I used this CSS to turn on the use of Glyphs for the element called '._p-glyphs
You will need to use the developer tools to find out which element/text you wish to change and then in 'Lay Options - Custom CSS & HTML' target them and apply the font-feature-settings like your post above mentioned.
https://laytheme.com/documentation.html#custom-css-styling
For instance you will inspect an element it may be called - e.g site title text
.site-title-text{ font-feature-settings: ss0X; }
Hope this helps! Good luck :)
Best
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it