slnt - Slant axis browser support
Hi all,
We're working on a font with 6 axes, including slant (-21 to 21 degrees).
While Chrome displays it correctly, Safari (including iPhones, which cover 18.5% of browsers) does not. Here’s what we've tried:
1. Default behavior
Chrome [left] looks good, Safari [right] assumes the normal slnt value is 21
2. Explicitly setting the slnt value
body { font-variation-settings: "slnt" 0; }
But this breaks the <em> tag for italics.
3. Hack
body { font-variation-settings: "slnt" 0; } em, i { font-variation-settings: "slnt" -9.5; }
Any suggestions for a fix or alternative solutions?
Thanks
Comments
-
I assume your font uses an avar version 1 table. The default axis values determine the default style, so if you expect the upright style to be the default, that should also apply to the default value for your slnt axis. In the upcoming avar version 2 (which isn't widely supported yet), you'll be able to set a different variation as the default.
I've run tests in Safari, and everything seems to be working as expected on my end, so it's difficult to pinpoint why it might be failing for you.
0 -
2
-
Thanks Erwin and Thomas,
Considering this, we are splitting the variable font file in several files "freezing" the slant axis to different values.
In case that it's useful to someone else:fullVF = ttLib.TTFont(full_font_path) partialFont = instancer.instantiateVariableFont(fullVF, {"slnt": 0})
1 -
You can also use FontCreator to subset variable fonts, including the option to change the default axis value. This allows you to set the primary font instance to a different position within the design space, without the need to split your variable font.
3
Categories
- All Categories
- 43 Introductions
- 3.7K Typeface Design
- 803 Font Technology
- 1K Technique and Theory
- 618 Type Business
- 444 Type Design Critiques
- 542 Type Design Software
- 30 Punchcutting
- 136 Lettering and Calligraphy
- 83 Technique and Theory
- 53 Lettering Critiques
- 483 Typography
- 301 History of Typography
- 114 Education
- 68 Resources
- 499 Announcements
- 80 Events
- 105 Job Postings
- 148 Type Releases
- 165 Miscellaneous News
- 269 About TypeDrawers
- 53 TypeDrawers Announcements
- 116 Suggestions and Bug Reports