59

I am trying to create a type of font repository for use on my websites, so that I can call to any font in the repository in my css without any other set-up. To do this I created a subdomain on which I placed folders for each font in the repository that contained the various file types for each font. I also placed a css file called font-face.css on the root of the subdomain and filled it with @font-face declarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.

My issue is that it seems that I can only use the fonts on that subdomain where they are located, on my other sites the font does not show. Using firebug I determined that the font-face.css file was successfully being linked to and loaded. So why does the font not correctly load? Is there protection on the font files or something? I am using all fonts that I should be allowed to do this with, so I don't see why this is occurring. Maybe it is an apache issue, but I can download the font just fine when I link to it.

Oh, and just to clarify, I am not violating any copyrights by setting this up, all the fonts I am using are licensed to allow this sort of thing. I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ben Kulbertis
  • 1,713
  • 4
  • 17
  • 30

4 Answers4

95

This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):

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

In response to this:

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Worked flawlessly, thank you very much! And thank you for looking for a way to allow a whitelist of domains, that would be excellent! Again thanks very much! +1 – Ben Kulbertis May 23 '10 at 17:35
  • 1
    You're welcome! I happened to have had this issue when designing my site a couple of months back, and that's what I found :) – BoltClock May 23 '10 at 17:44
  • 1
    I actually had the problem in Google Chrome as well, which led me to believe it was a ubiquitous issue, but maybe Chrome has the same thing? Regardless, they both work now. Again thanks very much for the solution and the help with the whitelist idea. – Ben Kulbertis May 23 '10 at 17:48
  • 1
    This worked great for me, except I had to use `LocationMatch` instead of `FilesMatch` (same regex syntax works fine). – Abe Voelker Oct 14 '11 at 20:43
  • Not sure if this works across all OSes. Does this work on Firefox for Mac? I observed it working for Firefox on PC but checked it on two MB Pros and it doesn't seem to work? Going to try the Base64 Encode option. – Darren Chan Feb 12 '12 at 08:15
  • 1
    @Halil Özgür: Only if you intend to support iOS older than 4.2. – BoltClock Jul 10 '12 at 09:58
  • Worked really well, but only after I removed the IFModule tags. The issue wasn't browser specific for me either - this fixed the fonts across all browsers. – Matt Dec 06 '16 at 01:33
8

Another way to fix this in Firefox is to embed the font directly into the css file using base64 encoding. Especially nifty if you don't have access to some of the configuration mentioned above.

You can generate the necessary code on fontsquirrel.com: in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.

This also has the fringe benefit of reducing page load time because it requires one less http request.

Pierre
  • 1,252
  • 1
  • 14
  • 24
  • 4
    But then wouldn't there be (font file size) x (number of font formats) overhead? – Halil Özgür Jul 10 '12 at 09:32
  • ... also: you can only use expert mode when uploading your own fonts (as far as I can tell), I had exactly this problem with PT Sans and couldn't upload it and use expert mode for encoding the font. – Jayx Mar 20 '13 at 12:00
  • @HalilÖzgür Yes you are correct. But it is actually faster to load single file than downloading mutliple files, because most browsers limit concurrent content-file downloads to 4 or 5. – FindOut_Quran Dec 08 '16 at 03:14
  • @FindOut_Quran Won't the browser download only the format it needs? I think most modern browsers got better in that department regardless. – Halil Özgür Dec 08 '16 at 20:56
4

If you do not want to allow resources from all domains but only from sub domain of your site, you should do it like:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Arvind Bhardwaj
  • 5,231
  • 5
  • 35
  • 49
1

Using http://www.fontsquirrel.com/fontface/generator in "expert" mode and choosing base64 as an option returned a stylesheet.css with the necessary base64 encoded data to use in our stylesheet. Seems to work in all browsers we've tested except IE8.

We run into this issue most when applying themes to 3rd party tools like salsa petition where we're forced to host the font.

Thanks for all the help everyone!

Darko Hrgovic
  • 19
  • 2