---
url: /docs/guide/usage/linter/rules/nextjs/google-font-display.md
---
### 它的作用
强制对 Google Fonts 使用 font-display 行为。
### 为什么这不好？
指定 display=optional 可将不可见文本或布局偏移的风险降到最低。\
如果在字体加载完成后切换到自定义字体对你很重要，那么请改用 \`display=swap\`\`。
### 示例
以下是此规则的**错误**代码示例：
```jsx
import Head from "next/head";
export default (Test = () => {
return (
);
});
```
以下是此规则的**正确**代码示例：
```jsx
import Head from "next/head";
export default (Test = () => {
return (
);
});
```
## 如何使用
## 版本
此规则添加于 v0.2.0。
## 参考资料