Skip to content
Biome
Docs Blog Playground

useGoogleFontDisplay

Diagnostic Category: lint/nursery/useGoogleFontDisplay

Since: v1.9.4

Sources:

Enforces the use of a recommended display strategy with Google Fonts.

The display property controls how a font is displayed while it is loading. When using Google Fonts, it’s important to specify an appropriate value for this property to ensure good user experience and prevent layout shifts.

This rule flags the absence of the display parameter, or the usage of less optimal values such as auto, block, or fallback. Using &display=optional is generally recommended as it minimizes the risk of invisible text or layout shifts. In cases where swapping to the custom font after it has loaded is important, consider using &display=swap.

Examples

Section titled Examples

Invalid

Section titled Invalid
<link href="https://fonts.googleapis.com/css2?family=Krona+One" />
code-block.jsx:1:12 lint/nursery/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The Google Font link is missing the display parameter.
  
  > 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One” />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
  
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=auto" />
code-block.jsx:1:12 lint/nursery/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The Google Font link has a non-recommended display value.
  
  > 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&amp;display=auto” />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
  
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=block" />
code-block.jsx:1:12 lint/nursery/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The Google Font link has a non-recommended display value.
  
  > 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&amp;display=block” />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
  
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=fallback" />
code-block.jsx:1:12 lint/nursery/useGoogleFontDisplay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The Google Font link has a non-recommended display value.
  
  > 1 │ <link href=“https://fonts.googleapis.com/css2?family=Krona+One&amp;display=fallback” />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.

Valid

Section titled Valid
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?display=unknown" rel="stylesheet" />
<link rel="stylesheet" />
Section titled Related links