时间戳

首页 > 解决方案 > 在 NextJS 中导入字体

fonts - 在 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)

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

标签： fontsnext.js

解决方案

让我建议你一个简单的方法。您可以在 CSS/SCSS 文件中导入字体。
然后你可以在你的项目中包含这个文件，无论你想要什么。

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

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

或者

@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>
    ...
  );
};

推荐阅读