When EdgeHTML 17 ships, all modern desktop-based browsers will support font-variation-settings, except for Firefox, where it is behind a flag. On , currently, Chrome and Safari 11.2 will support , but UC Browser and Samsung Internet do not.

At of writing, only EdgeHTML 17, Safari 11 on MacOS, and Safari 11.2 on iOS support font-optical-sizing.

Progressive enhancement

As you can see, support for variable fonts is beginning to make its way into browsers as well as into fonts, so it’s wise to use variable fonts in a progressive enhancements manner.
To see if a browser supports variable fonts, utilize the CSS @supports conditional check, like so:

@supports (font-variation-settings: "wght" 500) {
	/* variable font code here */

While this will check if the CSS parser understands font-variation-settings, it doesn’t necessarily ensure that the correct font is being selected. Take the following example:

font-family: "Bahnschrift", sans-serif;
font-variation-settings: "wght" 600;

This will result in users utilizing a Windows 10 device with the desired result, but unless you are providing a fallback copy of Bahnschrift from the server, anyone accessing your site using a different OS will render without any axis change. Because of this you should provide fallbacks and only utilize font-variation-settings for non-reserved axes so that no matter the font they’ll be styled similarly. For example a better approach would be:

font-family: "Bahnschrift", -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;

This will ensure that if the user is on Windows, Mac, iOS, result in grabbing their respective variable font. When using this approach however, you need to ensure that your design doesn’t depend on certain font metrics. If your design does depend on certain font metrics or a non-reserved axis then you should serve the font using @font-face, like so:

@font-face {
	font-family: "Decovar";
	src: url("fonts/DecovarAlpha-VF.ttf");

body {
	font-family: "Decovar";
	font-variation-settings: "TRMD" 400;

Source link


Please enter your comment!
Please enter your name here