为什么主题中设置的自定义字体没有在标题组件中呈现？

Question

阅读和学习 Chakra UI 并尝试为

Heading

组件设置默认 fontFamily 我尝试实现在标题中设置的字体：

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  fonts: {
    heading: `'Custom Font', sans-serif`,
  },
  styles: {
    global: {
      h1: {
        fontFamily: 'heading',
        color: 'blue',
      },
    },
  },
})

export default theme

颜色改变，但字体不变。

---

回答和进一步研究后

编辑。这似乎是一个活跃的问题，除非我的方法不正确，所以我将概述我所做的一切：

src/主题/index.js：

import { extendTheme, theme as defaultTheme } from '@chakra-ui/react'

const theme = extendTheme(
  {
    ...defaultTheme, // Dont think this is needed but was in an answer
    fonts: {
      heading: `'Foo Bar', sans-serif`,
    },
    
  },
)

export default theme

字体不在Fontsource上，所以尝试了

@font-face

方法：

src/主题/Fonts.js：

import React from 'react'
import { Global } from '@emotion/react'

const Fonts = () => (
  <Global
    styles={`
    @font-face {
      font-family: 'Foo Bar';
      font-style: normal;
      font-weight: normal;
      font-display: swap;
      src: local('Foo Bar'), url('./fonts/Foo-Bar.woff2') format('woff2');
    }
    `}
  />
)

export default Fonts

字体存储在目录结构中：

src/theme/fonts/Foo-Bar.woff2

盖茨比包装：

import React from 'react'
import PropTypes from 'prop-types'
import { ChakraProvider } from '@chakra-ui/react'

// Theme
import theme from './src/theme'
import Fonts from './src/theme/Fonts'

function RootWrapper({ element }) {
  return (
    <ChakraProvider theme={theme}>
      <Fonts /> // <!--- FONTS HERE
      {element}
    </ChakraProvider>
  )
}

RootWrapper.propTypes = {
  element: PropTypes.node.isRequired,
}

export default RootWrapper

当我记录主题时，我可以看到：

fonts: {
  heading: Foo Bar
}

根据下面的答案，当我检查

var(--chakra-fonts-heading);

时，它仍然显示：

--chakra-fonts-heading: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

让自定义字体发挥作用的唯一方法是使用

Text

并引入

textStyle

:

<Text as="h1" textStyle="h1">test</Text>

我认为这种方法忽略了

Heading

的用途。

研究：

• 无法更改 Chakra UI 中的默认字体
• 如何使用ChakraUI扩展字体
• 自定义字体无法加载
• 在 Next js 中使用 chakra UI 中的字体
• Chakra UI 的主要和辅助字体
• 使用自定义字体
• 自定义字体不起作用

依赖关系：

"@chakra-ui/gatsby-plugin": "^3.1.3",
"@chakra-ui/icons": "^2.1.0",
"@chakra-ui/react": "^2.8.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",

为什么自定义字体默认情况下不会呈现，而只有在作为

textStyle

传递时才会呈现？如何在主题默认情况下为所有标题使用标题字体？

Answer 1

编辑提供的附加信息

根据我之前在 Gatsby 中看到的问题并运行

gatsby clean

解决这些问题，我怀疑这可能是缓存问题。我无法根据您提供的内容重新创建问题 - 标题字体以两种不同字体的多种配置为我显示，这就是为什么我想知道这是否是开发环境异常。

我无法具体指出为什么它不起作用，但我将分享一个适合我的解决方案。

与 Gatsby、@chakra-ui/react 和 @chakra-ui/gatsby-plugin 一起：

1.导入本地字体

Gatsby 使用本地字体参考

1. 上传您的字体。在这个例子中，我将我的上传到

   src/fonts

   。根据用例，也可以选择

   static

   文件夹。
2. 使用@font-face创建CSS文件。我在

   src/fonts.css

   中创建了示例。

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/OpenSans-Regular.ttf") format("truetype");
}

在根文件夹中创建/编辑
3. gatsby-browser.js

    并添加它以全局加载字体。 

   盖茨比全球风格

import "./src/fonts.css" 在根文件夹中创建/编辑

gatsby-ssr.js
5. 以预加载字体文件。

   盖茨比-SSR

import * as React from "react"

export const onRenderBody = ({ setHeadComponents }) => {
    setHeadComponents([
        <link
            rel="preload"
            href="./src/fonts/OpenSans-Regular.ttf"
            as="font"
            type="font/ttf"
            crossOrigin="anonymous"
            key="yourFontKey"
        />,
    ])
}

2.创建 Chakra 主题文件的 

shadow

进行自定义

Chakra Gatsby 插件参考

创建

src/@chakra-ui/gatsby-plugin/theme.js
1. 。 Chakra gatsby-plugin 会自动添加 ChakraProvider 包装器，因此无需单独添加它，除非您正在执行自定义操作。添加您的自定义设置。标题示例如下：

import { extendTheme } from '@chakra-ui/react'

const theme = {
   fonts: {
       heading: `'Open Sans', sans-serif`
   }
}

export default extendTheme(theme);

3.重启 Gatsby 服务器

（可选）

gatsby clean
1. 清除缓存 - 这有时可以解决新的/更改的字体和其他显示问题。重新启动 Gatsby 服务器。

工作沙箱示例

---

原始答案：Chakra UI 主题如何为标题组件设置默认 fontFamily？

我用自定义字体尝试了你的第一个代码片段，它对我来说成功了。

这就是我为

Heading

组件（以及默认使用 Chakra“标题”字体的任何其他组件）导入和设置字体系列的方法：

import {extendTheme} from "@chakra-ui/react";
import '@fontsource-variable/yourFont';

const myTheme = extendTheme({
    fonts: {
        heading: `'yourFont Variable', sans-serif`
    }
})

export default myTheme;

---

Heading

组件已在其默认主题样式中应用了 Chakra 标题字体系列（请参阅上面的标题链接了解源代码，第 4 行）。 要检查字体是否尝试在浏览器中应用，请在开发工具中选择标题组件，然后检查 CSS 是否有

font-family: var(--chakra-fonts-heading);

，这意味着它正在应用 Chakra“标题”样式。如果已设置并且主题

--chakra-fonts-heading

CSS 显示正确的字体，但该字体未在浏览器中显示，则字体导入/渲染可能存在问题。我注意到有时在安装新字体后我必须停止/启动服务器才能让它们拾取。希望这有帮助！