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 -
1
Categories
- All Categories
- 40 Introductions
- 3.6K Typeface Design
- 787 Font Technology
- 1K Technique and Theory
- 606 Type Business
- 443 Type Design Critiques
- 534 Type Design Software
- 30 Punchcutting
- 135 Lettering and Calligraphy
- 82 Technique and Theory
- 53 Lettering Critiques
- 475 Typography
- 298 History of Typography
- 112 Education
- 65 Resources
- 488 Announcements
- 77 Events
- 105 Job Postings
- 148 Type Releases
- 157 Miscellaneous News
- 267 About TypeDrawers
- 53 TypeDrawers Announcements
- 115 Suggestions and Bug Reports