Familiarize yourself with CSS new Font-Display Property

It's only fair to share...Share on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn

In the beginning, each web browser controlled the settings of font faces and styles. You could not control font display and customizing your web page according to your needs was difficult. But, today, the options are endless.

If you are a designer who loves using web fonts, remember that there are a few issues with it such as un-styled text or invisible text on the web page. Also, your customers may be forced to look at blank pages because the text takes a lot of time to load.  So, when you want to create a pretty yet performant website, you need something that maintains the performance of the website without damaging its aesthetic appeal. And, there is where the new CSS font-display property comes into picture. You can use it with Opera, Opera for Android, Chrome, Mozilla and so on.

Font-Display for a Pretty and Performant Website

You have to use the font-display property inside @font-face rule. It means that it will not work with third-party font providers. The property accepts the following number of values:

  • Auto

It is the default value of the property. Here, the usual behavior of the browser will occur which means it will act as it does when you do not use the properly. It will hide the typefaces until the fonts are loaded properly in the browser.

  • Swap

Experts consider it the most popular value of the font-display property. It will help you to use the next available font (fallback font) when the custom font is not loaded in the browser completely. And, when your custom font loads, the browser will display it by replaying the fallback font quickly.

  • Fallback

When you want something that minimizes the difference between Auto value and Swap value, you can choose Fallback. When you use it, the text will be invisible for 100 milliseconds. After the time period, if the custom font is loaded in the browser, it will be displayed to the user. But, if it is not loaded, the fallback font will be shown to the users until the custom font is loaded.

  • Optional

It operates in the same way as Fallback but it gives power to the browser of making a decision with the custom font. The browser may decide not to load the custom font if there is an issue with the user’s internet connection. It is useful when the user’s internet connection speed is very slow and it creates a problem in loading the main fonts selected by the designer.

What Option is the Best Choice for your Web Pages?

Do you want the users to experience your chosen fonts? Do you think it will create an impact on them? Do you think the fonts are necessary for building your brand? If perception is not a big deal for you, font-display: Fallback can be a nice option for you.

And, if you think displaying your custom font is necessary, choose the Swap or the Optional value. No matter what you use, remember to test it adequately so that it doesn’t give you any problems in the future.

When it comes to your IT needs, trust PlatinaIT. We will help you develop your website the way your business needs it! Trust us for giving you quality results. Call on +1 (866) 602-8909 (US) OR +1 (416) 273-7206 (CANADA) to discuss your online business needs with us.