useGoogleFontDisplay
Ce contenu n’est pas encore disponible dans votre langue.
Diagnostic Category: lint/nursery/useGoogleFontDisplay
Since: v1.9.4
Sources:
- Same as:
@next/google-font-display
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 ExamplesInvalid
Section titled Invalidcode-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.
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&display=auto” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
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&display=block” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.
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&display=fallback” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Use &display=optional to prevent invisible text and layout shifts. If font swapping is important, use &display=swap.