Search code examples
htmlcssfontsfont-facewebfonts

Why doesn't my @font-face work in this example?

I have a jsfiddle set up with just a basic @font-face css and an h2. The font files that the css is referencing are all on the server, however if you enter the url for the woff file it says its not found. I have triple checked that the file exists exactly where it is pointing but I guess you just can't see woff files by entering them into url bars (edit: same for the svg).

So, why is the font in this jsfiddle not in open sans?

http://jsfiddle.net/rw2sbq8y/1/

html

<h2>Search for inventions</h2>

css

h2 {
    font-family:'open sans-test';
    font-size:24px;
    font-weight:normal;
}

@font-face {
    font-family: 'open sans-test';
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot');
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

(I am having an issue with fonts on the website I'm currently working on and I think this bit right here is the first step to fixing it)

Solution

  • Is the server hosting the fonts your server, or a 3rd party server like a CDN?

    If it's yours, a common problem that I have encountered in the past is that the server doesn't know how to serve the font to you.

    Fixing this is normally a simple matter of adding the MIME type for each font format type inc. EOT, WOF etc. To the server.

    You should do a Google search on how to do this for your server type (eg if it's IIS, or Apache or something else).

    Eg "how to add mime type to IIS".

    You can also find the correct MIME type for each font format by doing a search. The results come up pretty easy to find, but here is a big list of valid MIME types (just find the ones you need from the list): http://www.freeformatter.com/mime-types-list.html