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

Question

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

L. *_*man 2 javascript css fonts reactjs next.js

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

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

Answer 1

您可以通过document为next.js应用程序创建自定义（需要在pages文件夹中并命名为_document.js））

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;

Run Code Online (Sandbox Code Playgroud)

您可以在此处阅读更多相关信息。

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