Mobile app version of vmapp.org
Login or Join
Nimeshi995

: OpenType Variable Fonts: Supported Browsers Variable fonts have been on the drawing board for sometime and Google just released Chrome 62 with support for these new fonts and looks fairly simple

@Nimeshi995

Posted in: #BrowserSupport #CrossBrowser #Css #Fonts

Variable fonts have been on the drawing board for sometime and Google just released Chrome 62 with support for these new fonts and looks fairly simple to use, e.g:


font-variation-settings: 'wght' 700, 'wdth' 75;


Sadly, as of yet canIuse does not list this feature and therefore I am unsure if any other browsers support it, with this said this brings to me to the question(s):


Which browsers support Variable fonts?
Do you need to use a fallback method for devices that do not support the these new fonts or are the fonts compatible with all browsers but just lack the ability to adjust it?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Nimeshi995

1 Comments

Sorted by latest first Latest Oldest Best

 

@Dunderdale272

Lets get to the simpler answer first, browser support for variable fonts: Firefox developer editions have some level of support, now Chrome 62, Chrome Android, Safari iOS, and Safari. Based on usage, Chrome + mobiles & Safari hit the majority of the most used browsers looking at Can I Use. And now that Chrome has hit general release, the other browsers that want to stay in the race will be following suit.

As with everything browser related there may be some different implementations and some commands supported or not supported. Best to check the release notes for which ones you expect to support and use settings common to all.

Workaround: you can use CSS attributes instead. Not as fancy, but they are cross-browser compatible and they work. You can set a default in your CSS and then modify the font to variable settings in the places where you want variable fonts. Try a short bit of CSS on a couple of browsers and see if this gets the look you want. I think setting it in CSS is safer than allowing the browser to use it's default -- by user that could be almost anything.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme