Hello readers, In this blog I have got an updating news regarding CSS font-display property.

As we all work on Web Pages that includes various typeface and we didn’t have the option of setting our text .

Basically, to reduce the font load due to extra weight pages and flashes of unstyled or invisible text , a new functionality is introduced in CSS.

Web Support

The font-display property is currently applied in Opera browser for Android and Chrome. ( It has been first introduced in Chrome 49 as an experimental feature for testing).

Attribute Description With Values

The font-display property has four options , these are as follows :-

Auto , swap , fallback and optional .

If we apply font-display : auto , then the text will be invisible until the custom font gets loaded.

Now if we apply font-display :swap , on applying this , if the font is not loaded in spite of showing invisible content it gets replaced which is more user-friendly.

Further applying font-display :fallback , it follows a processor such as , if for a delay of 100 milliseconds the text remains invisible then the custom font will be loaded and used.

Until the custom font gets loaded , the next font which is in the line of priority will be displayed.

Now the last , if we apply font-display:optional it basically works as the fallback , now if the speed of the Internet gets slow then the browser does not load the custom font at all.
 

Note :- The display-font property is used in a @font-face declaration, that means it will not work with Google Fonts or Typekit.

Once this property gets widespread , it will be used by all browsers.