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.