Introducing CSS font-display Property

June 10, 2017 623

Isn't it that many front-end developers give minimum focus on font, although it is one of the most important factors in deciding whether a user visits your website again? The developers care much about the first font they list in the font-familyproperty, without giving much consideration to the fallback fonts.

The reason fallback fonts should be chosen with care is because it is these fonts which style your text in case the first font fails to load or is not installed in some computers. Apart from these, fallback fonts can be used in another case which is the main point on which this article is based on.

Now let's come to the main point. Whenever we load a website or a webpage, text is invisible until the custom font gets loaded. If it takes too long (8 seconds is really a long time), it can be frustating and users might choose to leave. In order to tackle this situation, CSS has come up with the font-display property which is a less known property.

The font-display property specifies how fonts are loaded and displayed by the browser.

CSS

font-display: value;


Currently, this property is not well supported by any browser. It can take five values.

Values

auto : This is the default value and works as defined by the user agent. Normally, the text is invisible until the custom font loads.

block : This is somewhat same as auto. The browser hides the text and then swaps it with the custom font as soon as it gets fully loaded. This is known as FOIT or "flash of invisible text".

swap : The browser uses the fallback font to display the text until the custom font gets fully loaded. This is known as FOUT or "flash of unstyled text".

fallback : The browser hides the text for 100 milliseconds and then uses the fallback font to display the text until the custom font gets fully loaded.

optional : It is just like fallback as it uses the fallback font after 100 milliseconds if the custom font does not load and until it loads. Apart from this, the browser may decide not to load the custom font at all, if the user’s connection is too slow.

A key point to note here is that this property can just be used in a @font-facedeclaration for now. It cannot be used with Google Fonts or Typekit. An example is given below.

CSS

@font-face {
font-family: 'MyFont';
src: url('MyFont.woff') format('woff');
url('MyFont.eot') format('eot');
font-display: fallback;
}


Browser Support

This property is not supported in any browser currently. Though it can be enabled in Chrome and Opera through a flag and in Firefox via the layout.css.font-display.enabled flag with its default value false. You can see more information regarding browser support from Caniuse.

Conclusion

The font-display property can be quite useful in situations where the size of the font file is large and slows down the loading time, though some web designers don't consider hiding the true website design a good practice. Once this property gets more browser support, its implementation will start at a good rate, but it is better not to use this property if the font loading time is short.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT