@font-face not loading fonts on webpages

Question

I'm developing a website locally, so my WAMP server on Windows 8 is serving up the pages. This site will be hosted on a secured server so for security reasons, I can't use the fonts.google.com CDN in the source code. I want to use the @font-face directive to embed the fonts in the .css files, but the fonts do not display in any browser correctly. The fonts will display if I include the hosted CDN link. I have read several posts on SO, but none of them I have read answer my particular problem. Below is my code and the steps I have taken to solve this:

defining in main.css

@font-face {
  font-family: 'Open Sans', sans-serif;
  src: url('../csfonts/OpenSans.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Lato', sans-serif;
  src: url('../csfonts/Lato.ttf') format('truetype'); 
}

using in CSS in a custom.css file

    body {
      font-family: 'Open Sans', sans-serif;
}

In the Chrome console, main.css and custom.css are both loading in the Network window, but the fonts are not displaying. I've inspected the elements in console Elements window that are supposed to be using the Open Sans font, and in the Styles panel it shows that the Open Sans font is over-writing a helvetica font. Yet, the typeface looks like Helvetica, not Open Sans. I've also checked the cascade order of the linked files in my HTML, as well as their paths, and main.css is the last linked stylesheet on the page (beneath custom.css), so main.css should take precedence right?

I also checked this SO thread thinking it may be that I have to create and edit an .htaccess file (youTube video), which I did. In the httpd.conf file, I found the following instructions, but I haven't modified it yet, and I don't know what to modify it to read.

#
# The following lines prevent .htaccess and .htpasswd files from being 
# viewed by Web clients. 
#
<Files ".ht*">
    Require all denied
</Files>

In the .htaccess file I created, I placed the following (taken from this SO thread):

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

I saved this file in my www folder on WAMP. I then removed the CDN link from my pages, and refreshed the browser. The fonts still do not display. It appears to be defaulting to helvetica or some sans serif font.

Could someone let me know what I am doing wrong and how to fix this? Thanks.

Answer 1

You're supposed to load each format of a font to be sure your custom font will work on every browser, like so:

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Open Sans';
    src: url('../csfonts/OpenSans.eot'); /* for IE6 and before */
    src: url('../csfonts/OpenSans.eot?#iefix') format('embedded-opentype'), /* for IE7 and IE8 */
         url('../csfonts/OpenSans.woff') format('woff'), /* for every decent browser (yes, IE9 included) */
         url('../csfonts/OpenSans.otf') format('opentype'), /* for every decent browser but in older versions (FF3, Chrome4, etc.) */
         url('../csfonts/OpenSans.svg') format('svg'); /* for iOS */
}

The call order is important! Long story short: when a browser find a line it understands, it will load the font and stop reading the call of your rule. And because there is a lot of browsers and versions out there, you need at least 5 lines to assure compatibility.

Summarize in one image: