How to import custom fonts in Next JS?

在NextJS项目中导入自定义字体主要有几种方法，这里我将详细介绍几种常用的方法，并且给出示例。

方法1：使用CSS或Sass

放置字体文件：首先，将字体文件放在公共目录（通常是public文件夹）下的fonts文件夹中。例如，你可以将Roboto-Regular.ttf放置在public/fonts目录下。
创建CSS文件：在styles目录中创建一个CSS文件，比如fonts.css。

引入字体：在fonts.css文件中使用@font-face规则来引入字体。例如：

css
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在_app.js或_app.tsx中引入CSS文件：
```
jsx
import '../styles/fonts.css';
```
使用字体：在项目中的任何组件中，你现在都可以通过CSS使用Roboto字体：
```
css
body {
  font-family: 'Roboto', sans-serif;
}
```

方法2：使用next/head

如果你只是想快速引用一个在线字体（如Google Fonts），可以使用next/head来在特定页面或者_app.js的头部添加字体链接：

编辑_app.js或特定页面：

jsx
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

使用字体：在CSS中直接使用字体，如上面CSS示例所示。

方法3：使用字体加载器（如fontsource）

如果你使用npm或yarn，可以选择使用如fontsource这样的包来管理字体。这种方法可以让你通过npm管理字体依赖，而不是手动下载字体文件。

安装fontsource包：

bash
npm install @fontsource/roboto

或者

bash
yarn add @fontsource/roboto

在_app.js或_app.tsx中引入字体：

jsx
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/700.css';

使用字体：在CSS中直接使用Roboto字体。

这些是引入自定义字体到NextJS项目中的几种常用方法。每种方法都有其使用场景，你可以根据项目需求和个人喜好选择适合的方法。

2024年6月29日 12:07 回复

1个答案

方法1：使用CSS或Sass

方法2：使用next/head

方法3：使用字体加载器（如fontsource）

你的答案