reactjs NextJS - Google字体未加载或显示在网站上

ltskdhd1 于 2023-01-02 发布在 React

关注(0)|答案(5)|浏览(188)

按照文档说明操作，并使用提供的代码添加了_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的事实吗？

reactjs

来源：https://stackoverflow.com/questions/69388400/nextjs-google-font-is-not-loading-or-displaying-on-the-website

5条答案

按热度按时间

b5buobof1#

在全局.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;
}

赞(0）回复(0）举报 2023-01-02

osh3o9ms2#

1.选中this，使用〈style data-href=代替
1.对于NExtJS和Vercel的字体，建议使用fontsource

赞(0）回复(0）举报 2023-01-02

bweufnob3#

导入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");

所有的字体都必须分开导入。对我来说，一起导入它们在制作中不起作用。

赞(0）回复(0）举报 2023-01-02

42fyovps4#

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

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

赞(0）回复(0）举报 2023-01-02

rt4zxlrg5#

我没有一个常用的方法。我尝试在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;
}

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs NextJS - Google字体未加载或显示在网站上

5条答案

相关问题

热门标签

最新问答