Самостоятельные шрифты в Next. js с next-less - PullRequest
Новая
       101

Самостоятельные шрифты в Next. js с next-less

1 голос
/ 20 июня 2020

Что я хочу и что мне интересно

Я хотел бы разместить шрифт (а именно Noto) внутри Next. js -приложения, которое уже использует @ zeit / next-less plugin.

Нужно ли мне использовать npm -package next-fonts для самостоятельного размещения шрифтов? Если да, нужно ли мне использовать npm -package next-compose-plugins для совместной работы next-fonts и next-less?

Нужно ли мне загружать шрифты (как WOFF (2)) в каталог /public в моем репозитории приложений? Или также просто использовать пакет npm, например fontsource-noto-sans , который поставляет эти шрифты?

Что я пробовал

Я пытался используйте вместе next-fonts и next-less, используя плагины next-compose-plugins. Я создал это /next.config.js: 

const WithPlugins = require('next-compose-plugins');
const WithFonts = require('next-fonts');
const WithLess = require('@zeit/next-less');

module.exports = WithPlugins(
    [
        [ WithFonts, {} ],
        [ WithLess, {} ]
    ],
    {});

В моем единственном глобальном файле less я поместил это: 

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif'), local('NotoSerif'), url('/public/fonts/noto-serif.woff2') format('woff2');
}

body {
  font-family:
    'Noto Serif',
    // and for debugging:
    monospace;
}

Я загрузил файлы шрифтов для Noto и поместил их в Папка …/public/fonts в папке Next. js -приложения.

Шрифт Noto не загружен, а моноширинный шрифт продолжает использоваться. Есть идеи, почему? И есть идеи, как легко разместить шрифт с помощью Next. js + next-less?

1 Ответ

1 голос
/ 22 июня 2020

Почему бы не сделать прямую ссылку на шрифт в заголовке документа

Я не вижу ваш проект, но если у вас есть шрифт в public, вы должны иметь возможность ссылаться на внешнюю загрузку файлы 

<HEAD>
 <link rel="preload" href="/public/fonts/noto-serif.woff2" as="font" type="font/woff2">
</HEAD>

в другом месте 

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family:
    'Noto Serif',
    // and for debugging:
    monospace;
}
...