@font-face not working

Question

Don't know why but font is not displaying.Please help.

CSS(in css folder): style.css:

@font-face {   font-family: Gotham;  src: url(../fonts/gothammedium.eot);  src: local('Gotham-Medium'),  url(../fonts/Gotham-Medium.ttf) format('truetype');  }   a {   font-family:Gotham,Verdana,Arial;  } 

Answer 1

Double period (..) means you go up one folder and then look for the folder behind the slash. For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face {  font-family: Gotham; src: url(../fonts/gothammedium.eot); src: url(../fonts/Gotham-Medium.ttf);  } 

Answer 2

I was having this same issue and I thought I'd share my solution as I didn't see anyone address this problem specifically.

The problem was I wasn't using the correct path. My CSS looked like this:

@font-face { font-family: 'sonhoregular'; src: url('fonts/vtkssonho-webfont.eot'); src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),      url('fonts/vtkssonho-webfont.woff2') format('woff2'),      url('fonts/vtkssonho-webfont.woff') format('woff'),      url('fonts/vtkssonho-webfont.ttf') format('truetype'),      url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); font-weight: normal; font-style: normal; 

The problem with the path is that I am referring to the font from my CSS file, which is in my CSS folder. I needed to come up a level first, then into the fonts folder. This is what it looks like now, and works great.

@font-face { font-family: 'sonhoregular'; src: url('../fonts/vtkssonho-webfont.eot'); src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),      url('../fonts/vtkssonho-webfont.woff2') format('woff2'),      url('../fonts/vtkssonho-webfont.woff') format('woff'),      url('../fonts/vtkssonho-webfont.ttf') format('truetype'),      url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); font-weight: normal; font-style: normal; 

I hope this helps someone out!