Question

我正在尝试在项目中导入字体，但出现错误：

./src/static/fonts/montserrat/Montserrat-Regular.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

fonts-loader.ts文件：

import MontserratBold from '@static/fonts/montserrat/Montserrat-Bold.ttf'
import MontserratItalic from '@static/fonts/montserrat/Montserrat-Italic.ttf'
import MontserratLight from '@static/fonts/montserrat/Montserrat-Light.ttf'
import MontserratRegular from '@static/fonts/montserrat/Montserrat-Regular.ttf'

export default {
  MontserratLight,
  MontserratRegular,
  MontserratItalic,
  MontserratBold,
}

Answer 1

让我建议您采用一种简单的方法。您可以将字体导入CSS / SCSS文件中。
然后，您可以将该文件包含在项目中的任何位置。

有两种在CSS / SCSS文件中导入字体的方法：

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("static/assets/fonts/Montserrat-SemiBold.ttf");
}

OR

@import url("https://fonts.googleapis.com/css?family=Lato");

现在，您只需使用 Head

导入此文件

您的屏幕文件：

import React from "react";
import Head from "next/head";

const ComponentName = () => {
  return (
    <Head>
      <link href="/static/assets/css/component-name.scss" rel="stylesheet" />
    </Head>
    ...
  );
};

在NextJS中导入字体

1 个答案: