如何使用 NextJS 使用自托管字体？

Question

使用 NextJS 的字体

我已经阅读了关于如何在 NextJS 中使用自托管字体的不同主题。

我得到的[ wait ] compiling...当我这样做时：

@font-face {
    font-family: 'montserrat';
    src: url('./mypath/Montserrat-Medium.woff2') format('woff2'),
        url('./mypath/Montserrat-Medium.woff') format('woff'),
        url('./mypath/Montserrat-Medium.ttf') format('truetype'),
        url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
}

没有错误，或者只是编译......我读过（ stackoverflow/57590195 ）它说我们应该使用静态路径，比如

@font-face {
    font-family: 'font';
    src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2');
}

但该解决方案根本不起作用。 它几乎看起来工作正常，因为错误（或强制等待）停止了。 但是如果你仔细观察，你的字体没有加载。

然后我尝试了 fontfaceobserver，我很快明白问题是一样的。 因为你必须使用font-face并且你不能将它与 NextJS 一起使用。

下载 next-font 后，我阅读了文档并查看了 github 示例。

这是我的next.config.js灵感来自于他们的。

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
const withFonts = require('next-fonts');

module.exports = withFonts(
    withCSS(
        withSass({
            enableSvg: true,
            webpack(config, options) {
                config.module.rules.push({
                    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                });
                return config;
            }
        })
    )
);

我的字体路径public/static/fonts 。

这就是我尝试使用它的方式。

...
function MainIndex() {
    ...
    return (
        <>
        ...
        <style jsx>{`
                @font-face {
                    font-family: 'Montserrat';
                    src: url('./static/fonts/Montserrat-Medium.ttf');
                }
                h1 {
                    font-family: 'Montserrat';
                }
        `}</style>
        </>
    )
}
...

我找到的解决方案

✗ https://github.com/bramstein/fontfaceobserver 456 KB
✗ https://github.com/rohanray/next-fonts 1.89 MB
？ dangerouslySetInnerHTML可以工作，但我猜它不是最好的解决方案。 （我没试过）
✗ 网址('./static/fonts/font.woff2')

阅读更多关于 github 的问题

编辑：

我试图适应Jesper We 所做的事情。

我创建了/public/static/fonts/fonts.css和/public/fonts/allMyfont.ttf然后我导入了 _var.scss 以将它与 sass 变量一起使用 @import "/public/static/fonts/fonts.css"; 导入 style.scss 我的 var $font 并将“my/path/style.scss”导入我的 index.js（永远编译）

在我尝试更接近的方式后，仍然/public/static/fonts/fonts.css与我的字体在同一个文件夹中。 然后在我的 index.js 中。 但是那个什么都不做。

这是实时CodeSandBox中的代码

Answer 1

这是我通常做的：

将 fonts 放在公共/静态某处
在与 fonts 相同的文件夹中，放置一个 CSS 文件，其中声明了 fonts

CSS 文件示例/public/fonts/style.css ：

@font-face {
    font-family: 'Italian No1';
    src: url('ItalianNo1-Black.eot');
    src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

在_document.js ( docs ) 中导入此 css：

render() {
    return (
        <Html>
            <Head>
                <link href="/fonts/style.css" rel="stylesheet"/>
            </Head>

            <body>
                <Main/>
                <NextScript/>
            </body>
        </Html>
    )
}

Answer 2

我已经尝试过最新版本的 next.js "next": "10.0.8"

将所有 fonts 添加到 public/fonts 文件夹并在带有字体的globals.css中使用。

我认为您在字体中使用的路径可能不正确，但我不确定代码的结构。

 @font-face {
  font-family: 'Open Sans';
  src: url('../public/fonts/OpenSans-Light.eot');
  src: url('../public/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
  url('../public/fonts/OpenSans-Light.woff2') format('woff2'),
  url('../public/fonts/OpenSans-Light.woff') format('woff'),
  url('../public/fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

之后你可以使用它font-family: 'Open Sans'

如果您想了解更多信息，这是一篇相关的博客文章

Answer 3

在v12.0.4 上，使用 tailwindcss 我不得不尝试一些 fs 更改，但得到了以下有效的方法。 此外，我使用了自定义 fonts 和谷歌 fonts。

您还可以在没有顺风的情况下进行测试，但要测试内联全局 CSS：

# _app.js
<div style={{ fontFamily: "Inter"}}>
    <Component {...pageProps} />
</div>

import '../public/styles.css' # 在 public/ 之外不起作用

# styles.css
# font files are in the same directory
@font-face {
    font-family: 'Avenir';
    src: url('avenir/avenir-light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

# tailwind.config.js
    theme: {
        extend: {
            fontFamily: {
                sans: ['Avenir', 'Inter', ...defaultTheme.fontFamily.sans],
                title: ['Avenir', 'Inter', ...defaultTheme.fontFamily.sans]
            }
        }
    },

# _document.js
<Head>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
        rel="stylesheet"
    />
</Head>

Answer 4

温馨提示：如今，您无需提供多个字体文件，因为仅使用一个文件即可广泛支持变量 fonts 。 此外，较新的字体格式woff2具有更好的压缩比，并再次得到广泛支持。

将字体文件放在/public/fonts/文件夹中
将其添加到_document.tsx文件中，以便为所有页面获取它：

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html>
        <Head>
          <link
            rel="preload"
            href="/fonts/inter-var-latin.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
        </Head>
        ...

在全局 CSS 文件中提到：

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url(/fonts/inter-var-latin.woff2) format("woff2");
  }

告诉浏览器将此字体文件缓存很长时间（~1 年），以避免为后续站点访问进行不必要的重新下载。
将标题添加到next.config.json ：

module.exports = {
  async headers() {
    return [
      {
        source: "/fonts/inter-var-latin.woff2",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=31536000, immutable",
          },
        ],
      },
    ];
  },
};

上面的实现可以在我个人网站的这个提交上看到。

Answer 5

将 /fonts/OpenSans.otf 目录移动到 public/fonts/OpenSans.otf。 为我工作。

现在我可以在任何地方使用这条线：

@font-face {
      font-family: 'OpenSans';
        src: url('/fonts/OpenSans.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }

如何使用 NextJS 使用自托管字体？

问题描述

使用 NextJS 的字体

5 个解决方案

解决方案1
19 2020-05-20 13:01:47

解决方案2
5 2021-03-07 22:51:12

解决方案3
0 2021-11-26 07:38:53

解决方案4
0 2022-01-30 23:51:56

解决方案5
0 2022-12-18 22:49:43

如何使用 NextJS 使用自托管字体？

问题描述

使用 NextJS 的字体

5 个解决方案

解决方案1 19 2020-05-20 13:01:47

解决方案2 5 2021-03-07 22:51:12

解决方案3 0 2021-11-26 07:38:53

解决方案4 0 2022-01-30 23:51:56

解决方案5 0 2022-12-18 22:49:43

解决方案1
19 2020-05-20 13:01:47

解决方案2
5 2021-03-07 22:51:12

解决方案3
0 2021-11-26 07:38:53

解决方案4
0 2022-01-30 23:51:56

解决方案5
0 2022-12-18 22:49:43