Reference »

How to allow loading of external fonts

Show category trails

Say you’ve got a website on one domain, loading fonts from a server on another domain. Browsers block this unless the server that’s supplying the fonts is configured just right.

(The following configuration is for Apache. How to do it for other server software, I have no idea.) 

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
	<IfModule mod_headers.c>
		Header add Access-Control-Allow-Origin "*"
		Header append Vary Origin
	</IfModule>
</FilesMatch>

This will enable cross-origin font loading.

Now suppose you don’t want to serve fonts to just anyone, but only specific sites, or sites on specific domains. In that case, add the following lines, after the above: 

RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^http(s)?://www.mywebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(.+).mydomain.net [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://www.anotherwebsite.org [NC]
RewriteRule \.(ttf|otf|eot|woff|woff2)$ - [NC,F,L]

This will allow the fonts to be served to:

Categories: Apache | Code Snippets | Fonts | Web Development