css - 自托管字体在 Gatsby 和 Safari 中不起作用

Question

几天来我一直在谷歌搜索和尝试这方面的事情，但我仍在努力让 Safari 显示带有样式组件的自定义字体(在 FF 和 Chrome 中工作正常)

这是在我的 globalstyles.js 中

import { createGlobalStyle } from 'styled-components'
export default createGlobalStyle`
  @font-face {
    font-family: 'Langdon';
    font-style: normal;
    font-weight: normal;
    src: local(Langdon), 
    url('./fonts/langdon-webfont.ttf') format(truetype), 
    url('./fonts/langdon-webfont.woff') format(woff),
    url('./fonts/langdon-webfont.woff2') format(woff2);
  }

globalstyles.js 被导入我的 layout.js

然后我在我的组件中使用它:

const RocketShipTitle = styled.h1`
  color: #cc9056;
  padding-top: 50px;
  padding-left: 50px;
  font-family: Langdon, sans-serif;
  font-size: 5rem;
  font-weight: 100;
`

有什么想法吗？

谢谢

Answer 1

有同样的问题 - 我能够通过将字体导入 /fonts 中的 index.js 文件并导出来让它工作，所以在你的情况下:

import LangdonWOFF "./fonts/langdon-webfont.woff"
import LangdonTTF "./fonts/langdon-webfont.ttf"

export { LangdonWOFF, LandonTTF }

然后在 globalstyles.js 中导入并使用

import * as font from "./fonts"


@font-face {
    font-family: 'Langdon';
    src: url(${font.LangdonTTF}) format(truetype), 
    url(${font.LangdonWOFF}) format(woff);
}