NextJS - Google 字体未加载或显示在网站上
Posted
技术标签:
【中文标题】NextJS - Google 字体未加载或显示在网站上【英文标题】：NextJS - Google font is not loading or displaying on the website 【发布时间】：2021-11-22 01:40:48 【问题描述】：遵循文档并使用提供的代码添加了一个 _document.js 文件：
import Document, html, Head, Main, NextScript from 'next/document'
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx)
return ...initialProps
render()
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default MyDocument
当我使用我的 chrome 扩展字体检查器并在检查器中进行验证时，它声明它使用默认字体。知道我怎样才能让它工作吗？我使用的是 tailwindcss 是否会受到干扰？
【问题讨论】：
您是否已经在tailwind.config.js 中定义了该字体？ 【参考方案1】：在 globals.css
中/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
/* From Public Directory */
@font-face
font-family: 'Kurale';
src: url('/fonts/Kurale.ttf');
font-style: medium;
font-weight: normal;
font-display: swap;
【讨论】：
啊，是的，谢谢！我忘了在我的 globals.css 表中设置它。【参考方案2】：尝试在globals.css（或导入到_app.js 的任何样式表）中使用@import，而不是<link>：
/* globals.css */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap");
【讨论】：
【参考方案3】：-
检查this，使用
【讨论】：
以上是关于NextJS - Google 字体未加载或显示在网站上的主要内容，如果未能解决你的问题，请参考以下文章