logo标签列表

NextJS - 谷歌字体在网站上没有加载或显示

reactjsfontsnext.jstailwind-cssgoogle-fonts
18

按照文档添加了一个带有提供的代码的_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中定义了那个字体吗？ - zonay
6个回答
12
在 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样式表中设置这个了。 - Kristian Abenojar
1
这确实可以工作。然而，在CSS中使用关键的@imports并不推荐，因为它会在页面加载后才呈现字体。我建议您使用illia-chill的解决方案，即使用Vercel的https://fontsource.org/加载字体。这是使用Next.js加载字体的最佳方式。 - Ammar Oker
注意使用Bootstrap或其他框架的CSS时要小心，因为它们可能会发生冲突并且无法应用字体。 - Leffa
是的，你说得对！ - Sagar Roy
5

将所有字体导入globals.css中或在_app.tsx中导入的样式表中

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");

所有的字体都必须分别导入。对于我来说，在生产中一起导入它们并不起作用。
5
  1. 查看这个，使用<style data-href=代替。
  2. 对于使用NextJS和Vercel的字体，我建议您使用Fontsource。
2

不要使用<link>，而是尝试在你的globals.css（或任何被导入到_app.js中的样式表）中使用@import：

/* globals.css */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap");
1

对我来说，通常的方法都不起作用。我试图在global.css文件中导入以下内容：

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;700&display=swap");

字体未能加载。我不得不注入实际的字体：

/* IMPORTANT: For some reason directly importing the font from fonts.googleapis.com/css2 is not working. Instead I had to inject its contents */
/* @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;700&display=swap"); */

/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC3YU-CnE6Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC3YU-CnE6Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimC3YU-Ck.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
这帮助我找到了解决问题的方法。我们正在使用 CSP，我在 font-src 中有 fonts.gstatic.com，但在 style-src 中没有 fonts.googleapis.com - 谢谢！ - Nuri Hodges
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接