コンテンツにスキップ

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.

<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.

<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" />