部署到 Vercel 时，Google 字体未加载到 Next.js 中

Question

部署到 Vercel 时，Google 字体未加载到 Next.js 中

Tec*_*emn 6 next.js google-fonts vercel mantine

运行应用程序时，http://localhost:3000一切正常且看起来很棒。但将我的 Next.js 应用程序部署到 Vercel 后，字体没有显示，日志中也没有显示任何内容。

我遵循了 Next.js 文档中的建议，这就是我的_document.tsx样子 -

import { Global } from '@mantine/core'
import { createGetInitialProps } from '@mantine/next'
import Document, { Head, Html, Main, NextScript } from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
    static getInitialProps = getInitialProps

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital@0;1&family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet" />
                    <Global
                        styles={(theme) => ({
                            'body': {
                                backgroundColor: theme.colors.gray[3],
                                color: theme.colors.gray[8],
                                fontFamily: '\'Roboto Condensed\', sans-serif',
                            },
                            '.primary-text': {
                                fontFamily: '\'Bebas Neue\', sans-serif',
                            },
                            '.secondary-text': {
                                fontFamily: '\'Lora\', serif',
                            },
                        })}
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

Run Code Online (Sandbox Code Playgroud)

任何见解都会有帮助吗？谢谢！

Answer 1

ale*_*cio 7

最近遇到这个问题，尝试禁用优化字体并在构建时再次获取字体：

// under next.config.js
 module.exports = {
     ...
     optimizeFonts: false,
 }

Run Code Online (Sandbox Code Playgroud)

Answer 2

Tec*_*emn 6

经过几个小时和多次部署后，我找到了一个目前有效的解决方案。我从组件中删除了所有 Google Fonts 引用Head，而是下载了css它引用的文件。我将其复制到/styles/fonts.css，现在已导入到_app.tsx.

woff2css 中对文件的所有引用保持不变。至少现在我可以在“网络”选项卡中看到正在下载的字体文件。

归档时间：	3 年，6 月前
查看次数：	13033 次
最近记录：	2 年，3 月前