Caniuse: Need more caveats for variable fonts

Created on 15 Jan 2018 · 4Comments · Source: Fyrd/caniuse

Variable fonts are shown as supported in Chrome and Safari. While this is true, more caveats should be noted as they are basically unusable on those browsers at the current time seeing as @font-face does not support format('woff2-variations') and font-weight, font-stretch and font-optical-sizing do not yet work and you are required to use the low-level font-variation-settings, which is not recommended to control these registered axes.

Support data questiocorrection

Source

o-t-w

👍4

Most helpful comment

This article documents the amount of loops you have to jump through to use them as currently implemented in all browsers other than Safari
https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604

o-t-w on 29 Jan 2018

👍2

All 4 comments

https://css-tricks.com/one-file-many-options-using-variable-fonts-web/#article-header-id-6

Variable fonts have shipped in Chrome and Safari. They are already in the insider preview version of Edge and behind a flag in Firefox. At the current time, not all parts of the spec are fully implemented by Chrome. Using variable fonts in conjunction with font-style, font-stretch, font-weight and font-optical-sizing does not work in Chrome, so using font-variation-settings to control the five standard axes is necessary for the time being. Specifying the format as woff2-variations inside of @font-face also lacks support in Chrome (you can specify only woff2 and the font will still work, but then you are unable to have a non-variable woff2 fallback).