Posted by Arjun Arjun on Thursday 27th August 2015, 1 minute read

Allow Cross Domain Fonts with CORS

How to htaccess Allow Cross Domain Fonts CORS

Some browsers like IE doesn't allow cross-domain fonts by default - unless you set a Access-Control-Allow-Origin header to the font.

cross-domain fonts mean fonts that are not hosted on your domain and may be CDN based fonts or fonts that are hosted on other websites.

It seems that for security reasons browsers do not allow cross-domain requests.

When using Web fonts via @font-face or other CSS3 methods, some browsers will refuse to embed the font when it’s coming from a 3rd party URL. The solution is very simple, just add a few lines to your .htaccess file.

Add below lines to your .htaccess or httpd.conf:

# Apache config

	Header set Access-Control-Allow-Origin "*"


# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
	add_header Access-Control-Allow-Origin *;
}

This sets the Access-Control-Allow-Origin CORS configuration to allow pulling from all domains. List specific domains by comma if you want to serve fonts up to only specific domains.

...
Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.