2021-05-10 10:03:28 +02:00
# Google Font Display
2022-06-14 04:17:42 +02:00
> Enforce font-display behavior with Google Fonts.
2021-05-10 10:03:28 +02:00
### Why This Error Occurred
2022-06-14 04:17:42 +02:00
For a Google Font, the font-display descriptor was either missing or set to `auto` , `block` , or `fallback` , which are not recommended.
2021-05-10 10:03:28 +02:00
### Possible Ways to Fix It
For most cases, the best font display strategy for custom fonts is `optional` .
```jsx
import Head from 'next/head'
export default function IndexPage() {
return (
< div >
< Head >
< link
href="https://fonts.googleapis.com/css2?family=Krona+One& display=optional"
rel="stylesheet"
/>
< / Head >
< / div >
)
}
```
Specifying `display=optional` minimizes the risk of invisible text or layout shift. If swapping to the custom font after it has loaded is important to you, then use `display=swap` instead.
### When Not To Use It
2022-06-14 04:17:42 +02:00
If you want to specifically display a font using an `auto` , `block` , or `fallback` strategy, then you can disable this rule.
2021-05-10 10:03:28 +02:00
### Useful Links
2022-06-14 04:17:42 +02:00
- [Controlling Font Performance with font-display ](https://developer.chrome.com/blog/font-display/ )
2022-06-13 17:17:36 +02:00
- [Google Fonts API Docs ](https://developers.google.com/fonts/docs/css2#use_font-display )
- [CSS `font-display` property ](https://www.w3.org/TR/css-fonts-4/#font-display-desc )
