Для начала, я знаю, что это, вероятно, глупо. Шрифты всегда доставляют мне неприятности, как-то по такой обычной вещи действительно нелегко найти информацию. Все учебные пособия в Интернете делают его чрезвычайно простым (включая собственное руководство Гэтсби), и никто на самом деле не освещает потенциальные проблемы.
Я использую это руководство, оно простое, но дает идею: объявите @font-face в отдельном файле CSS, импортируйте этот файл в свое приложение. Итак, вот моя структура:
src/
┣ assets/
┃ ┗ fonts/
┃ ┣ DMSerifDisplay-Italic.ttf
┃ ┣ DMSerifDisplay-Regular.ttf
┃ ┗ fonts.css
┣ components/
┃ ┣ ...
┃ ┗ layout.tsx
┗ pages/
┣ 404.tsx
┗ index.tsx
Оба шрифта импортируются в fonts.css следующим образом:
@font-face {
font-family: 'DM Serif Display';
src: url('./DMSerifDisplay-Regular.ttf') format('ttf');
}
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
src: url('./DMSerifDisplay-Italic.ttf') format('ttf');
}
Затем этот файл импортируется в layout.tsx (который является основой любой страницы):
import React, { FC } from 'react'
import { Header } from './header'
import { Footer } from './footer'
import { GlobalStyles } from './global-styles'
import { ThemeProvider } from 'styled-components'
import { theme } from './sc-theme'
import '../assets/fonts/fonts.css'
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
export const Layout: FC = ({ children }) => {
return (
<ThemeProvider theme = {theme}>
<GlobalStyles />
<Header />
<main>{children}</main>
<Footer />
</ThemeProvider>
)
}
Однако я не вижу, чтобы шрифты были импортированы на вкладке сети. Я попытался добавить некоторые стили в fonts.css, и они действительно загружаются, поэтому файл есть в комплекте, но не шрифты. Дайте мне знать, если какая-либо другая информация поможет.
🤔 А знаете ли вы, что...
CSS можно использовать для создания печатных стилей, чтобы настроить отображение веб-страниц при печати.
Можешь попробовать?
@font-face {
font-family: 'DM Serif Display';
src: local('DM Serif Display'), url('./DMSerifDisplay-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
src: local('DM Serif Display'), url('./DMSerifDisplay-Italic.ttf') format('truetype');
}
Я также боролся с местными шрифтами. Наконец, я закончил с проектами Typography и Fontsource:
npm i \
typography \
typography-theme-funston \
gatsby-plugin-typography \
react-typography \
@fontsource/cabin-condensed \
@fontsource/patua-one
Вы можете использовать оба проекта или любой из них независимо по своему усмотрению.
./Гэтсби-config.js
{
resolve: "gatsby-plugin-typography",
options: {
pathToConfigModule: "./src/utils/typography",
omitGoogleFont: true, // using local fontsource fonts instead
},
},
./src/utils/typography.js
import Typography from "typography"
import funstonTheme from "typography-theme-funston"
const typography = new Typography(funstonTheme)
export default typography
./gatsby-browser.js
import "./src/css/index.css"
./src/css/index.css
@import "~@fontsource/cabin-condensed/latin-400.css";
@import "~@fontsource/cabin-condensed/latin-700.css";
@import "~@fontsource/patua-one/latin-400.css";
... // other styles you need, e.g. https://fonts.google.com/icons
@import "~@fontsource/material-icons/base-400.css";
Это работает как шарм! Все загружается с вашего домена.
Еще один фрагмент, если вы хотите встроить шрифты в кодировке Base64 в свой CSS как ссылку на данные (url(data:font/woff;base64,...
). URL-загрузчик поддерживает опцию limit
, но настроить ее немного сложно.
./gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, getConfig, actions }) => {
if (stage !== "build-javascript" || process.env.gatsby_executing_command !== "build") {
return
}
const config = getConfig()
const fontsRegex = /\.(eot|otf|ttf|woff(2)?)(\?.*)?$/
const fontsLoader = config.module.rules.find((rule) => rule.test && String(rule.test) === String(fontsRegex))
;[].concat(fontsLoader.use).forEach((it) => {
it.options = it.options || {}
it.options.limit = 100_000 // Embed all Fonts into CSS to reduce outbound connections
})
actions.replaceWebpackConfig(config)
}