如何使用 Next.js 在 React 应用程序中使用 Google 字体

Question

我正在使用 Next.js 构建一个基本的 React 应用程序，想知道我将如何在应用程序中使用 Google 字体。

是否可以在每个组件中导入字体，或者我是否需要制作主样式表？

Answer 1

您可以通过为 next.js 应用程序（需要位于 pages 文件夹中并命名为 _document.js）创建自定义 document 来轻松地将字体添加到您的应用程序（全局）

import Document, { Html, Head, Main, NextScript } from 'next/document';

class CustomDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;

您可以阅读更多相关信息 here。

如何使用 Next.js 在 React 应用程序中使用 Google 字体

How to use Google fonts in a React application using Next.js

javascript

css

fonts

reactjs

next.js