probberechts / hexo-theme-cactus

:cactus: A responsive, clean and simple theme for Hexo.
https://probberechts.github.io/hexo-theme-cactus/
MIT License
3.06k stars 761 forks source link

Configured fonts don't display when deployed to remote #376

Closed skadomsky closed 5 months ago

skadomsky commented 5 months ago

I have configured new font NotoSerifTC-Regular.otf instead of using the default MesloLGS-Regular.ttf , and I placed fonts folder "Noto_Serif_TC" , in which the .otf file lies in, under /themes/cactus/source/lib. Then I changed _fonts.styl and _variables.styl (both are under /themes/cactus/source/css) as below:

/* _fonts.styl */
@font-face
  font-style: normal
  font-family: NotoSerifTC
  src: local("NotoSerifTC"), url("../lib/Noto_Serif_TC/NotoSerifTC-Regular.otf") format("opentype")

/* _variables.styl */
// Fonts
$font-family-body = "NotoSerifTC", "NotoSerifTC", monospace
$font-family-mono = "NotoSerifTC", "NotoSerifTC", monospace
$font-size = 14px
$line-height = 1.725
$page-width = 0rem + (hexo-config("page_width") || 39)
// Logo
$logo-width = 0px + (hexo-config("logo.width") || 0)
$logo-height = 0px + (hexo-config("logo.height") || 0)
$logo-grayout = hexo-config("logo.grayout") || false
// Colors
$colors = hexo-config("colorscheme") || "dark"

The /public/css/style.css generated:

@font-face {
  font-style: normal;
  font-family: NotoSerifTC;
  src: local("NotoSerifTC"), url("../lib/Noto_Serif_TC/NotoSerifTC-Regular.otf") format("embedded-opentype");
}

It actually works well when I serve it to localhost:4000 and font displayed nicely. But after I deployed to remote, the site cannot display the font and back to the origin Meslo font instead. The whole font folder was included in git (/public/lib/Noto_Serif_TC) so there isn't any font file missing. My repository is at: https://github.com/skadomsky/skadomsky.github.io/ so my github pages address is https://skadomsky.github.io/. Is there any suggested error in my progress? Thanks for answering!

PS Sorry for my ignorance in front-end. I have never written front-end programs before, and for this problem I took a look in CSS in a short term. I apologize for my noob wrong if it exists.

skadomsky commented 5 months ago

I have tried cleaning cookies & opening the page in private mode. It didn't work neither.

skadomsky commented 5 months ago

The problem has solved. My previous network environment makes my browser difficult to fetch the font file and load. But it's still hard to explain why the meslo font was displayed instead in my past trials.