Dynamic Web Fonts Not Visible in Firefox under SSL

Under SSL Firefox will not show  custom fonts from your server. It has something to do with cross domain permissions of Firefox.

Server Stored Fonts in Firefox

Add this piece of code in your .htaccess file in fonts directory

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

Also add MIME types for fonts in your hosting control panel or in .htaccess:

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf    ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Looks like Firefox 8 is not working with above codes, but previous versions are fine. Need to find a solution for FF8. :( Something with Apache config…

Google Web Fonts in Firefox

I saw Google CDN fonts are showing under SSL in Firefox 8, but not locally stored fonts. They are called with JS loader:

// Loading Fonts from Google
  WebFontConfig = {
    google: { families: [ 'Cantarell:bold' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

This actually works on FF8, I’ve checked.

This entry was posted in Browsers Testing and tagged , , . Bookmark the permalink.

3 Responses to Dynamic Web Fonts Not Visible in Firefox under SSL

  1. Pingback: Dynamic Web Fonts Not Visible in Firefox under SSL | Fix CSS …

  2. avatar says:

    this method worked with the latest firefox 11.0 and wordpress site!
    just added these two codes in .htaccess file

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">