时间戳

首页 > 解决方案 > @fontface custom font not loading in Gatsby

css - @fontface custom font not loading in Gatsby

问题描述

my custom font is not working, unless I install it manually in my computer.

//my css file//

  @font-face {
  font-family:'PROGRESS PERSONAL USE';
  src: url('Progress.woff2')format('woff2'),
  url('Progress.woff')format('woff'),
  url('Progress.ttf') format('ttf');
}

Font family name is correct because, I opened the file font to check the correct spelling and also it shows correctly in the browser if I install the font and use it as:

h1{
font-family: "PROGRESS PERSONAL USE"
}

I thought that the problem was the path of the font files, so I placed them in the same folder and level as the CSS file. I also tried adding a / to the path like url('/Progress.woff2')format('woff2')... in front. Cleared caché, changed browser, and tried in mobile But not working. Also in my browser inspector/Network shows that the fonts are found when refreshing the browser:

Request URL: http://localhost:8000/Progress.woff2
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

Would be happy to get help with this!

标签： cssfontsgatsbycustom-font

解决方案

The self-hosted fonts in Gatsby should be located in the static folder. So I placed the files in the path:

--> static/fonts/Progress.woff2
-->static/fonts/Progress.woff
-->static/fonts/Progress.ttf

and then in my globalStyles.css which is in my src/ (not in the static folder) I place it like this:

@font-face {
  font-family:"PROGRESS PERSONAL USE";
  src: url('/fonts/Progress.woff2')format('woff2'),
  url('/fonts/Progress.woff')format('woff'),
  url('/fonts/Progress.ttf') format('ttf');
}

If you don't have a global css file you can define one for the fonts, and import it in your gatsby-browser.js.

Also there is the option of using the web fonts gatsby pluggin which is explained here

推荐阅读