Font won't load even though described properly

Question

I have a font locally stored in resources/fonts/ and am properly referring to it, but it somehow won't load. My <style> in html:

<style>
    @font-face{
        font-family:"franklin_gothic_condensed";
        src:url("resources/fonts/fgc.ttf");
    }
</style>

The html where I am using the font:

<p id="missieHead1" class="headText">
    Missie 2014.<br>
    Onze terugkeer.
</p>

The CSS where I apply the font:

.headText{
    font-family:"franklin_gothic_condensed";
    color:white;
}

I acquired the fonts through our supplier, who happens to be a globally known German holding company with investments in the automotive industry. I made sure that my URLs were correct because I tried it with other fonts in the same directory, and they all worked. As for how they were created, I have no idea and I do not believe I am at a position to request how they were created.

I would really like to know what I'm doing wrong here, because I'm at my wits' end. Looking at other questions didn't help me either.

SOLUTION: I found out that our supplier supplied us with a faulty font. Searching the font on the web and downloading it worked.

Answer 1

I'm writing this as an answer since the comments above are cramped for explanation.

First, as mentioned above, the source declaration is slightly wrong:

@font-face{
  font-family:"franklin_gothic_condensed";
  src: url("resources/fonts/fgc_____.ttf");
}

Second, you should wrap your font-family in quotes. The CSS spec lays down a few guidelines about quoting font families that contain punctation. While there are situations where you can get away with not using quotes, it's generally a good idea to use them:

.headText{
  font-family: "franklin_gothic_condensed";
  color: white;
}

Otherwise, make sure that your .ttf is being loaded. Try renaming it.

Answer 2

You didn't mention your server type, but if you are using a windows server and IIS you might want to verify that the ttf mimetype has been set up properly.

Here are the mimetypes for web fonts in IIS:

.eot   application/vnd.ms-fontobject  
.ttf   application/octet-stream  
.svg   image/svg+xml  
.woff  application/x-woff

Answer 3

The syntax for declaring the source of the file is:

src: url('url of the file');

So, do this:

@font-face{
    font-family:"franklin_gothic_condensed";
    src:url("resources/fonts/fgc_____.ttf");
}