0

I'm creating a website and I'm trying to change the default font, but even if it seems that it's being loaded correctly (I see no loading errors even on other's computers) all I get on the page is the default one. This is the CSS code I use to load the fonts:

@font-face {
  font-family: "Fira Code";
  src: URL("../fonts/FiraCode-Regular.woff2") format('woff2'), 
       URL("../fonts/FiraCode-Regular.woff") format('woff'),
       URL("../fonts/FiraCode-Regular.ttf")  format('truetype');
}

The font is then called:

body {
  font-family: "Fira Code";
}

For reference, the structure of the website folder is:

website-folder
  |- index.html
  |- css
  | |- style.css
  |- fonts
  | |- FiraCode-Regular.woff2
  | |- FiraCode-Regular.woff
  | |- FiraCode-Regular.ttf

I've tried calling font-family on a singular element as well but it didn't work.

As seen from another question, I've added at the beginning of every CSS file this code, but still no luck:

 *= require fonts

The CSS files are different between the mobile and computer versions of the website, but they are in the same folder so the font code is identical. The terminal CSS is separate as well. I'm using this API, so I've downloaded the CSS locally and modified the font-family in it, but nothing.

I've tried using the GitHub font links as the URLs in the font-face - which I made sure are working - but it still didn't work.

Another weird thing is that after trying to solve this issue for a couple of hours the font shows up on the website, but not on the mobile HTML, and if I try to load it from another computer it's showing the default font.

I've tried looking at several other questions on the issue, but none helped me solved my problem. I really hope that anyone can help me! Thanks in advance :-)

EDIT: I messed up relative directories by writing ./fonts/FiraCode-Regular.woff2 instead of ../fonts/FiraCode-Regular.woff2, but now even with the fixed code the font still won't show up.

EDIT II: The problem, in the end, was the *= require fonts code I added to the beginning of every CSS file as seen in an answer to another question. I don't know why it stopped the fonts from being loaded, but thanks to everyone that helped me with the first edit as well! Without it 100% it wouldn't have worked the same.

Niccolò Abate
  • 11
  • 2
  • `./WWCA/fonts/FiraCode-Regular.woff2` Please try this. – BOZ Nov 17 '20 at 18:46
  • Your code seems correct. Did you check with a different browser or in incognito mode? – Ozgur Sar Nov 17 '20 at 18:47
  • @BOZ — Where is `WWCA` supposed to come from? – Quentin Nov 17 '20 at 18:49
  • @Quentin Because it keeps it here. `https://sylathas.github.io/WWCA/fonts/FiraCode-Regular.woff2` but `./` prefix is looking here: `https://sylathas.github.io/fonts/FiraCode-Regular.woff2` – BOZ Nov 17 '20 at 18:52
  • @BOZ — That's not where they're looking. Relative paths don't work like that. – Quentin Nov 17 '20 at 18:53
  • @ozgur I've tried now using both another browser and incognito mode on my computer and the font is showing, but when I try to open it from another computer or cellphone the default font shows up. – Niccolò Abate Nov 17 '20 at 18:53
  • @Quentin I mean if you specify a relative path like this "./" in css, it searches from another directory. But the file is inside the (WWCA) folder. Am I thinking wrong? – BOZ Nov 17 '20 at 18:56
  • @BOZ — Yes. The file is inside the css directory. – Quentin Nov 17 '20 at 18:57
  • @Quentin the CSS files are in the css folder which is inside the WWCA, so writing `./` should bring me to the WWCA folder, not `https://sylathas.github.io`, no? – Niccolò Abate Nov 17 '20 at 18:58
  • @NiccolòAbate — No. `./` brings you to the css directory. – Quentin Nov 17 '20 at 18:59
  • @NiccolòAbate so I guess your path should be `../fonts/FiraCode-Regular.woff2"` – Ozgur Sar Nov 17 '20 at 19:00
  • @Quentin I've tried changing the paths`./WWCA/fonts/FiraCode-Regular.woff2` but still nothing... – Niccolò Abate Nov 17 '20 at 19:03
  • @Quentin I've tried `../fonts/FiraCode-Regular.woff2` as well and it worked on my brother's phone but when we tried the website on his computer the font didn't show up – Niccolò Abate Nov 17 '20 at 19:10
  • `./WWCA/fonts/FiraCode-Regular.woff2` and `../fonts/FiraCode-Regular.woff2` both are correct. The reason it does not work is because you added the wrong comment. https://imgur.com/p9CXqBP – BOZ Nov 17 '20 at 19:14
  • @BOZ I deleted those comments but the font is still not loading on my phone... – Niccolò Abate Nov 17 '20 at 19:20

0 Answers0