Fonts 在NextJS中导入字体_Fonts_Next.js

Fonts 在NextJS中导入字体

fonts next.js

Fonts 在NextJS中导入字体,fonts,next.js,Fonts,Next.js,我试图在项目中导入字体，但出现错误： ./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

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

./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,
}

让我给你推荐一个简单的方法。您可以在CSS/SCSS文件中导入字体。然后，您可以将此文件包含在您的项目中，无论您想在哪里

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

或

现在，您可以简单地导入带有Head的文件

您的屏幕文件：

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

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

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

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