CSS @font-face - font-display

The CSS descriptor font-display for the at-rule @font-face determines the way a font face is to be displayed, on the basis of whether and when it is downloaded and can be used.

The moment a user agent tries to use a given downloaded font face, a time begins, which determines the font-display timeline. This timeline is categorised into three periods, which decides the rendering behavior of the elements that use this font face:

  • Font block period: An invisible fallback font face must be rendered, when any element is trying to use a font face that is not loaded. On succesful loading of the font face during this period, will be used normally.

  • Font swap period: A fallback font face must be rendered, when any element is trying to use a font face that is not loaded. On succesful loading of the font face during this period, will be used normally.

  • Font failure period: When the font face does not get loaded, the user agent considers it as a failed load resulting in a normal font fallback.

Possible Values

The CSS descriptor font-display can have one of the following values:

  • auto: The user agent defines the strategy of font display.

  • block: Font face is given a short block period with an infinte swap period.

  • swap: Font face is given an extremely short block period with an infinte swap period.

  • fallback: Font face is given an extremely short block period with a short swap period.

  • optional: Font face is given an extremely short block period and a no swap period.

Note: The preferences gfx.downloadable_fonts.fallback_delay and gfx.downloadable_fonts.fallback_delay_short specifies the duration of short and extremely short periods, resepectively, in Firefox.

Syntax

font-display: auto | block | swap | fallback | optional;

CSS font-display - auto Value

When the font-display is passed as auto, it renders the output as defined by the user agent. In the following example, the font-family is Sansation Light Font, hence the text in h1 element will be rendered in the specified font face.

<html>
<head> 
<style>   
   @font-face {
      font-family: "Sansation Light Font";
      src: url(font/SansationLight.woff);
      font-display: auto;
   } 

   h1{
      font-family: "Sansation Light Font";
      text-decoration-line: underline;
      color: green;
   }
</style>
</head>
<body>
   <h1>font-display: auto</h1> 
</body>
</html>

CSS font-display - optional Value

Following example demonstrates the use of font-display: optional:

<html>
<head> 
<style>   
   @font-face {
      font-family: "Sansation Light Font";
      src: url(font/SansationLight.woff);
      font-display: optional;
   } 

   h1{
      font-family: "Sansation Light Font";
      text-decoration-line: underline;
      color: green;
   }
</style>
</head>
<body>
   <h1>font-display: optional</h1> 
</body>
</html>

CSS font-display - block Value

Following example demonstrates the use of font-display: block:

<html>
<head> 
<style>   
   @font-face {
      font-family: "Sansation Light Font";
      src: url(font/SansationLight.woff);
      font-display: block;
   } 

   h1{
      font-family: "Sansation Light Font";
      text-decoration-line: underline;
      color: green;
   }
</style>
</head>
<body>
   <h1>font-display: block</h1> 
</body>
</html>
Advertisements