CODEWITHSUNDEEP
cssurlfont-faceexternalabsolute
andreas
andreas

Reputation: 8004

Load external css with font-face

I know that font-face does not allow an external url to the font in some browsers (for example, this will not work in Firefox).

But lately I discovered the plugin "video-js" which helps you embed videos in a video player. The css file from that plugin contains a font called vjs.

Why can I use their hosted version and their custom font "vjs" still works on my website server1.example.com?

<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>

As soon as I host the css on my second webserver server2.example.com, it will not work anymore until I move the file back to server1.example.com or use the hosted version by zencdn.

Why is that? Did they modify some settings in their web server?

Upvotes: 0

Views: 257

Answers (1)

Mister Epic
Mister Epic

Reputation: 16743

Firefox doesn't allow cross-domain requests for custom fonts by default. I still don't understand why they don't allow this, but you can get around it by adding the Access-Control-Allow-Origin header to the request for the font. In Apache, you would do something like this:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Upvotes: 2

Related Questions