@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.

score 1 · Accepted Answer · edited Jan 17 '15 at 23:52

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: compatibility table for font-face rule

edited Jan 17 '15 at 23:52

Hugolpz

17,296
26
100
187

answered Sep 24 '14 at 22:34

Pierre Le Bot

294
1
5
20

Thanks. I thought it should be something like that. On [Google Fonts](http://www.google.com/fonts) when you select "Add to Collection" the lines of code you listed is not generated -- only a link and the CSS rule, no `@font-face` directive, and only `.ttf` types. The downloaded zip contains:`OpenSans-Bold.ttf` `OpenSans-BoldItalic.ttf` `OpenSans-ExtraBold.ttf` `OpenSans-ExtraBoldItalic.ttf` `OpenSans-Italic.ttf` `OpenSans-Light.ttf` `OpenSans-Regular.ttf` `OpenSans-SemiBold.ttf` `OpenSans-SemiboldItalic.ttf` Where is the code you listed generated from? – Chris22 Sep 25 '14 at 07:41
The download zip contains only ttf fonts because you're supposed to install them. You've got a pretty good explanation about `font-face` rule on [CSS Tricks](http://css-tricks.com/snippets/css/using-font-face/) – Pierre Le Bot Sep 25 '14 at 08:24
Thanks. Yes, I have already installed the fonts locally. They are in the `csfonts` path I use to define the rule. I also read that article on CSS tricks before I posted here. The article doesn't tell me how to get the code you posted. I got the font from [google fonts](http://www.google.com/fonts), following usage instructions. Those fonts are type `.ttf`. I don't mean to repeat myself, but based on your code above, what are you using to generate that code? I can't imagine that I'm supposed to change the .ttf filetype to `.otf`, `.woff`, `.eot` and `.svg` manually? Thanks. – Chris22 Sep 25 '14 at 19:37
Well, the code was not "generated" from anywhere, I wrote it. If the only format you have is `ttf` then you should convert the fonts from one of the many services online (just google "convert font", I don't know if one is better than another) – Pierre Le Bot Sep 26 '14 at 14:23
I'm sure you see that I've already answered my question yesterday and found a generator. Please see my answer above. Thanks. – Chris22 Sep 26 '14 at 15:00

score 0 · Answer 2 · answered Sep 25 '14 at 20:01

After more googling, I found the answer I am looking for. I will post it here if anyone else is interested. I post to SO seeking answers after doing lots of research first. There are alot of posts on SO about this subject, yet, none of the ones I read answered my question -- and I clicked on alot of links as I was typing the title and read them. Below is the easy solution I was looking for. The webkit that is generated and packaged as a .zip file contains the fonts and all the instructions on how to get them installed, configured and running on your website. Hope this helps others. It helped me. We were all newbies at one time, or may have forgotten how to do something. Cheers.

WebFont Generator at Fontsquirrel

score -1 · Answer 3 · answered Sep 25 '14 at 20:11

Try to add also jquery and this code to force the font (off course you need to be connect to internet):

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript"> 
    jQuery(window).ready(function(){
        WebFont.load({
          custom: {
            families: ['Open Sans'],
          }
        });
    });
</script>

Enjoy your code!

@font-face not loading fonts on webpages

3 Answers3

Linked