Font Feature Settings — is it possible?
-
hello,
Fairly new to the coding world but I am trying to get CSS 'font-feature-settings' working on my website. The webfont I am using is 'Wallop Medium' by Displaay which I have uploaded within my Lay Theme as a .woff.
I inserted the following code into the custom CSS section. However, it doesn't work...
.sitetitle-txt-inner _Default {
font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0;
}When I use the same code in the Chrome developer tools section under 'element.style {', it works.
Can anyone help?
Site URL: johnszetho.com
-
Dear @johnszetho_
I cannot see it work in inspector. Can you send a screenshot when the snippet is active?Best!
Marius
-
If you want all these features to be applied to the whole site the best would be to add that to your body, like so:
body { -moz-font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0; -ms-font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0; -o-font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0; -webkit-font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0; font-feature-settings: "ss01", "ss10", "ss13", "ss14", "ss15", "liga", "swsh", "liga" 0, "dlig" 0; }
If you only want to apply these settings to your
_Default
class you should also be able to add that after the body-tag like so:body _Default {…
If you want to check which font feature does what and get the corresponding code I’d recommend to go to this site choose your (local) font and play around with the settings and copy the code as soon as the typeface does what you desire.
If you want to read about all possible open type features I’d recommend to check out this site.
Hope this helps — Cheers!
-
@edgrbnz thanks for the tip!
It worked when I applied the code solely to the body tag.
Really helpful, cheers again.
John
-
You are very welcome!
Happy it works! 💐💐💐 -
This one did the trick:
Although, worth noting that it shows an error message despite that it works.
Thanks for your help!
-
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it