@font-face still not working with Firefox and htaccess

Question

I've searched and searched and searched but I still can't figure out how to get my custom font loaded in Firefox. Using the @font-face property, I have this in the head section:

@font-face {
   font-family: 'MeanTimeMedium';
src: url('http://sweetbacklove.com/fonts/meantimec3-webfont.eot');
src: url('http://sweetbacklove.com/fonts/meantimec3-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://sweetbacklove.com/fonts/MeanTimec3.ttf') format('truetype'),
     url('http://sweetbacklove.com/fonts/meantimec3-webfont.woff') format('woff'),
     url('http://sweetbacklove.com/fonts/meantimec3-webfont.svg#MeanTimeMedium') format('svg');}

Because Firefox won't accept direct links to other domains, I put an .htaccess file in my "fonts" folder reading as such:

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

Still, I'm getting squat. If anyone could provide any insight, it would be greatly appreciated.

My website. The fonts and .htaccess file are hosted on GoDaddy on a Windows server with IIS 7.0.

Thanks.

score 3 · Answer 1 · edited May 23 '17 at 12:21

Google Web Fonts API generates/uses link tags, to be placed in the html head tag.

<link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>

When this page is linked to, it handles a Get Request to a .woff file, which is a mime type of font/woff.

Referring to this stackoverflow article < CSS @font-face not working with Firefox, but working with Chrome and IE >, you my want to add the following Mime Types in your .htaccess file.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

You could also try directly linking to the font file (I haven't tried this)

<link href='http://sweetbacklove.com/fonts/meantimec3-webfont.woff' rel='stylesheet' type='font/woff' media='all'>

@font-face still not working with Firefox and htaccess

1 Answers1