如何将本地字体导入Gatsby网站?

贾夫·帕克

首先,我知道那可能是愚蠢的。字体总是给我带来麻烦,以某种方式很难找到这样的普遍信息。所有在线教程都使它看起来非常简单(包括Gatsby自己的教程),没有人真正涵盖潜在问题。

我正在使用本指南,很简单,但它给出了一个主意:在单独的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中,但确实可以加载它们,因此文件位于文件包中,但没有字体。让我知道其他信息是否有帮助。

Nisharg Shah

你可以试试看吗?

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在具有SCSS的Gatsby网站中,如何导入本地字体?

如何将ttf字体本地文件导入Vuetify变量?

如何将 Gatsby 网站方向更改为 RTL?

如何将静态文件添加到Gatsby网站

Gatsby-将Google字体添加到Gatsby网站

如何将新字体导入项目-Angular 5

如何将 Google 字体导入 HTML/CSS?

如何将Puppeteer指向本地图像/字体?

如何将网站图形数据导入Google表格

如何将数据从 xml 链接导入 HTML 网站

如何将链接从网站导入到谷歌表?

如何将本地git存储库导入github?

如何将本地js文件导入基本的html文件?

如何将本地文件导入到colab

如何将数据库导入WordPress Multi网站中的每个网站?

如何将本地脚本文件添加到 gatsby

如何将在线字体链接转换为本地字体?

如何将 Google Fonts 链接更改为 css @import 以在本地获取字体

如何将示例xml数据导入到我的Wordpress网站中?

问:如何将 IAAI 网站中的表格导入 Google 表格?

您如何将p5.js导入网站?

如何将广告牌网站上的歌曲列表导入Google表格?

如何将某些信息导入网站到我的程序中

如何将WordPress网站从本地主机迁移到实时服务器?

如何将本地存储中的对象显示到网站上?

如何将本地 postgres 文件导入 Heroku postgres 数据库?

如何将本地库导入Angular6应用程序?

如何将本地HTML文件导入到Swift Playground Live View?

如何将外部库导入ReactJS应用程序(本地)