next google fonts

next google fonts

AI Исходный код

v2.2.0

Скачать

️

Этот проект устарел

По состоянию на next.js 10.2, шрифты Google автоматически оптимизированы?

Спасибо за вашу любовь и поддержку этого проекта,
Джо

Следующие гугл-фонты

Крошечный next/head помощник для быстрого и асинхронного загрузки шрифтов Google ⏩

Используя next.js 10? Смотрите "Как это сравнивается с оптимизацией шрифтов Next.js?" Прежде чем продолжить.

Настраивать

В этом примере мы собираемся добавить Inter (специально веса 400 и 700 ) в приложение Next.js.

См. Joebell.co.uk для рабочего примера.

Добавьте пакет в ваш проект Next.js:
```
npm i next-google-fonts
```

Создайте пользовательский компонент Head .

Важно признать, что next-google-fonts -это небольшой компонент next/head и не должен быть вложенным внутри next/head . Чтобы решить это, оберните оба компонента Fragment .

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

Добавьте запрашиваемый шрифт Google Font/S в свои стили с разумным запасением. Неважно, используете ли вы CSS, SASS или CSS-In-JS:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
Запустите свое приложение Next.js, чтобы увидеть результаты в действии!
Вы должны ожидать сначала запасной шрифт, а затем переключатель на шрифт Google без каких-либо предупреждений CSS, блокирующих рендеринги. Ваш шрифт/S будет продолжать отображаться до тех пор, пока ваше приложение не будет повторно ограничено.
Если JS отключен, отобразится только запасной шрифт.

Часто задаваемые вопросы

Как это сравнивается с оптимизацией шрифтов next.js?
Почему?

Как это сравнивается с оптимизацией шрифтов next.js?

Next.js 10 представил автоматическую оптимизацию шрифта Google, вы можете принять решение о том, какое решение использовать на основе следующих критериев:

«Мои шрифты не являются приоритетными и могут быть загружены асинхронно »-используйте next-google-fonts .
«Мои шрифты являются приоритетом и не должны быть загружены асинхронно » - используйте оптимизацию шрифтов Next.js

Для дальнейшего чтения см. Обсуждение следующего.js.

Почему?

next-google-fonts направлены на то, чтобы сделать процесс использования шрифтов Google в next.js более последовательным, более быстрым и безболезненным: он предварительно подключается к шрифтам, предварительным нагрузкам и асинхронно загружает файл CSS.

В текущей итерации next/head мы не можем использовать знакомый метод «Hack Hack» асинхронной загрузки шрифта Google:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>