@font-face not loading fonts on webpages

问题:

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.

回答1:

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

回答2:

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:

回答3:

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!