Rectangle 27 0

css @font face fonts only work on their own domain?


Thanks for all the help everyone!

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.

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


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

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.

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).

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

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

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):

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 :)

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


... 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.

@FindOut_Quran Won't the browser download only the format it needs? I think most modern browsers got better in that department regardless.

@Halilzgr 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.

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.

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

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.

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


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

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

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.

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).

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

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

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):

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 :)

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


Thanks for all the help everyone!

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.

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


... 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.

@FindOut_Quran Won't the browser download only the format it needs? I think most modern browsers got better in that department regardless.

@Halilzgr 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.

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.

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

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.

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


# 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>

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

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


# 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>

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

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


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

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.

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).

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

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

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):

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 :)

Note
Rectangle 27 0

css @font face fonts only work on their own domain?


# 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>

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

Note