在NextJS中导入字体

问题描述

我正在尝试在项目中导入字体，但出现错误：
./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)
@H_404_5@
 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,}
@H_404_5@


解决方法

        让我建议您采用一种简单的方法。
您可以将字体导入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>
    ...
  );
};

      
fonts