DeepSource
Dashboard Resources Pricing Discover Directory Log in

Run your first analysis.

Find thousands of code security and quality issues in your codebase, before they end up in production.

Start now
JavaScript

JavaScript

Made by DeepSource
Use Analyzer

Inconsistent font-display for Google Fonts JS-W1009

Anti-pattern
Minor
 Autofix

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: auto uses whatever font display strategy the user-agent uses. Most browsers currently have a default strategy similar to block.
  • block: block gives 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: swap gives 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: fallback gives 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: optional gives 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>
  )
}

References