---
title: "@next/next/google-font-display"
description: "Require a `display` parameter other than `auto`, `block` or `fallback` on Google Fonts URLs"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "nextjs"
aliases: ["nextjs/google-font-display"]
kind: "problem"
category: "correctness"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

The `display` parameter in a Google Fonts URL decides what the browser shows while the font downloads. Without it, or with `auto` or `block`, the text can stay invisible until the font arrives. With `fallback`, the browser only waits a few seconds for the font and then keeps the fallback font for that page view.

The rule checks `<link>` elements with an `href` that starts with `https://fonts.googleapis.com/css`. It reports a missing `display` and the values `auto`, `block` and `fallback`. Any other value is accepted, such as `optional` or `swap`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/google-font-display" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const font = <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />;
```

{/* bad */}
```jsx
const font = <link href="https://fonts.googleapis.com/css2?family=Inter&display=block" rel="stylesheet" />;
```

Not reported:

{/* good */}
```jsx
const font = <link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet" />;
```

An `href` in braces isn't checked:

{/* good */}
```jsx
const font = <link href={fontUrl} rel="stylesheet" />;
```