如何将本地字体导入盖茨比网站

Question

首先，我知道这可能很愚蠢。字体总是给我带来麻烦，不知何故，这种常见的东西真的不容易找到信息。所有在线教程都让它看起来非常容易(包括盖茨比自己的教程(，没有人真正涵盖潜在的问题。

我正在使用这个指南，它很简单，但它给出了一个想法：在一个单独的CSS文件中声明@font face，在你的应用程序中导入该文件。这是我的结构：

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中添加一些样式，它们确实加载了，所以文件在捆绑包中，但没有字体。如果有其他信息可以帮助，请告诉我。

Answer 1

你能试试吗？

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

Answer 2

我也很难使用本地字体。最后，我完成了排版和字体源项目：

npm i 
typography 
typography-theme-funston 
gatsby-plugin-typography 
react-typography 
@fontsource/cabin-condensed 
@fontsource/patua-one

您可以选择同时使用这两个项目，也可以选择在自己方便的时候独立使用其中的任何一个项目。

排版

/gatsby-config.js

{
resolve: "gatsby-plugin-typography",
options: {
pathToConfigModule: "./src/utils/typography",
omitGoogleFont: true, // using local fontsource fonts instead
},
},

/src/utils/printing.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";

这很有魅力！所有内容都从您的域加载。

在CSS中嵌入base64编码字体

如果您希望将Base64编码的字体作为数据链接(url(data:font/woff;base64,...(嵌入到css中，还需要一个代码片段。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)
}