# @next/next/google-font-display

> Require a `display` parameter other than `auto`, `block` or `fallback` on Google Fonts URLs

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