Inconsistent font-display for Google Fonts JS-W1009
Anti-pattern
Minor
8 months ago
—
8 months old
Avoid using the default font display for google fonts
26 return (
27 <div>
28 <Head>
29 <link30 href="https://fonts.googleapis.com/css2?family=Inter"31 rel="stylesheet"32 />33 </Head>
34 <p>Hello world!</p>
35 </div>Avoid using the default font display for google fonts
4export default Test = () => {
5 return (
6 <Head>
7 <link 8 href="https://fonts.googleapis.com/css2?family=Krona+One" 9 rel="stylesheet"10 />11 </Head>
12 );
13};
Description
The display descriptor for the Google font is either not assigned or set to auto, fallback, or block.
A recommended way to resolve this is to set display as optional. Specifying display=optional minimizes the risk of invisible text or layout shift. If it is essential to swap to a custom font after it has loaded, use display=swap instead.
The Google font-display takes the following values:
- auto:
autouses whatever font display strategy the user-agent uses. Most browsers currently have a default strategy similar to block. - block:
blockgives the font face a short block period (3s is recommended in most cases) and an infinite swap period. In other words, the browser draws "invisible" text at first if the font is not loaded but swaps the font face in as soon as it loads. To do this, the browser creates an anonymous font face with metrics similar to the selected font but with all glyphs containing no "ink." This value should only be used if rendering text in a particular typeface is required for the page to be useable. - swap:
swapgives the font face a zero-second block period and an infinite swap period. This means the browser draws text immediately with a fallback if the font face isn't loaded but swaps the font face in as soon as it loads. Similar to block, this value should only be used when rendering text in a particular font is important for the page, but rendering in any font will still get a correct message across. The logo text is a good candidate for swap since displaying a company's name using a reasonable fallback will get the message across, but you'd eventually use the official typeface. - fallback:
fallbackgives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (three seconds is recommended in most cases). In other words, the font face is rendered with a fallback at first if it's not loaded, but the font is swapped as soon as it loads. However, if too much time passes, the fallback will be used for the rest of the page's lifetime. fallback is a good candidate for things like body text where you'd like the user to start reading as soon as possible and don't want to disturb their experience by shifting text around as a new font loads in. - optional:
optionalgives the font face a minimal block period (100ms or less is recommended in most cases) and a zero-second swap period. Similar to fallback, this is a good choice for when the downloading font is more of a "nice to have" but not critical to the experience. The optional value leaves it up to the browser to decide whether to initiate the font download, which it may choose not to do, or it may do it as a low priority depending on what it thinks would be best for the user. This can be beneficial when the user is on a weak connection, and pulling down a font may not be the best use of resources.
Bad Practice
import Head from "next/head";
export default Test = () => {
return (
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One"
rel="stylesheet"
/>
</Head>
);
};
Recommended
import Head from "next/head"
export default Test = () => {
return (
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
rel="stylesheet"
/>
</Head>
)
}