Custom fonts not loading

Issue

I'm trying to upload Gotham fonts to a website I'm building but it's not working. I've searched on here and via google and can't see what the problem is other than a syntax upload issue that I can't spot that hopefully another pair of eyes can.

I've loaded custom fonts before on a rails app but never a pure front-end site so not sure if there's something glaring that I'm omitting. I've set up a fonts file - Gotham_fonts - and have six files in there all with .otf extension.

style.css

@font-face {
  font-family: 'Gotham-Book';
  src: url('Gotham_fonts/Gotham-Book.otf') format('otf');
}

body {
  font-family: 'Gotham-Book', arial, sans-serif;
}

I've tried a few different variations and also tried it with !important but nothing. Should my fonts folder be actually inside my CSS folder?

Solution

Firstly: use https://www.fontsquirrel.com/tools/webfont-generator to generate OTF, TTF, EOT, and WOFF versions of your font because all four are used/preferred in certain browsers so you might as well add them all.

Secondly: Your css (your html is fine) then should look something akin to:

@font-face {
    font-family: "Gotham-Book";
    src: url("../Gotham_fonts/Gotham-Book.eot");
    src: 
    url("../Gotham_fonts/Gotham-Book.woff") format("woff"),
    url("../Gotham_fonts/Gotham-Book.otf") format("opentype");
}

the ../ is assuming your css folder and your 'Gotham_Fonts' folder are in the same parent directory.

Let me know if this helps!

Answered By - Brandon L.