skyguy skyguy - 3 months ago 7
CSS Question

CSS - Font won't import from local ttf file?

Ok, I think this may have to do with the font-family name I am giving my font imports, but for some reason only Proxima nova light will load. The others don't register when I use them in my css.

@font-face {
font-family: "ProximaNova";
src: url(fonts/proximanova-regular-webfont.ttf");

}
@font-face {
font-family: "ProximaNova-Light";
src: url(fonts/proximanova-light-webfont.ttf");

}
@font-face {
font-family: "ProximaNova-Bold";
src: url(fonts/proximanova-bold-webfont.ttf");

}
@font-face {
font-family: "Gotham";
src: url(fonts/GothamBook.ttf");

}


For all, I have my fonts in a folder called fonts in my css folder where the css script lives. If I try to use
font-family: 'proximanova'
however it does not work -

I am referencing the right file name:
enter image description here

And I made up the font-family names (just to something that made sense), however I don't think this should matter as my light proxima nova is loading.
Why won't my fonts work?

Answer

You're missing the opening " in your url.

So change

url(fonts/proximanova-regular-webfont.ttf")

to

url("fonts/proximanova-regular-webfont.ttf")

And I think you're good to go :)

Cheers,