.htaccess - @font-face not working across domains in Firefox

Question

I am trying to use a font from typefront.com. It works in every other browser but the security restrictions in Firefox don't allow using fonts from a different domain.

I've tried creating an .htaccess file and adding the following snippet of code but when I try to load the site I get an internal server error page!

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

Here is my CSS code:

@font-face {
  font-family: "Gravur-CondensedBold";
  src: url("http://typefront.com/fonts/825589026.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/825589026.woff") format("woff"),
       url("http://typefront.com/fonts/825589026.ttf") format("truetype"),
       url("http://typefront.com/fonts/825589026.svg") format("svg");
}

@font-face {
  font-family: "Gravur-CondensedLight";
  src: url("http://typefront.com/fonts/825589027.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/825589027.woff") format("woff"),
       url("http://typefront.com/fonts/825589027.ttf") format("truetype"),
       url("http://typefront.com/fonts/825589027.svg") format("svg");
}

Can anybody help me with this?

here's the url: http://www.enjoythisyeah.com

Answer 1

使用带有 base64 编码的 WOFF 或 SVG 字体的 dataURI来绕过web 字体的同源限制。