Блог

Главная - Вопросы по программированию - Импорт шрифтов в NextJS

Импорт шрифтов в NextJS

#fonts #next.js

#шрифты #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 https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

шрифты-файл 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,
}

Ответ №1:

Позвольте мне предложить вам простой подход. Вы можете импортировать шрифты в файл 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>
    ...
  );
};