All Collections
Editor Questions
How-To Questions
How to set up CORS policy for fonts?
How to set up CORS policy for fonts?

In this article you can find instruction on how to apply the HTTPS headers for the correct font displaying in the browser.

Marina Krivenets avatar
Written by Marina Krivenets
Updated over a week ago

In order to display custom fonts right in the email, the browser must receive font files with correct HTTP headers. If the server does not set required headers, some browsers can report errors in console or completely fail to display fonts.

To solve this issue your system administrator should apply the right CORS header for fonts on the server where they are placed.

Probably, your server is already configured, and you don't need to change anything. If not, you need to care about:

  1. Correct mime-type headers

  2. CORS headers β€” only if you serve fonts files & html pages from different domains

  3. For IE, check that your http headers for the font files do not have no-store or no-cache.

Apache

To set right mime-types for font files, add these lines to config:

AddType font/ttf                         ttf 
AddType font/otf otf
AddType font/woff woff
AddType font/woff2 woff2
AddType application/vnd.ms-fontobject eot

If you can't edit config, create .htaccess file in the folder with your project and add lines there.

For CORS headers add:

<FilesMatch 
".(eot|ttf|otf|woff|woff2)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>

Nginx

By default, Nginx has no default mime types for fonts and wrong mime type for .eot files. Go to the folder with configs and find where mime types are defined. Usually, that's in the mime.types file.

  1. Search .eot and string with it.

  2. Add strings below.

font/ttf ttf; font/otf otf; font/woff woff; font/woff2 woff2; application/vnd.ms-fontobject eot;

For CORS headers, add something like this to your host config

location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }


Thank you for taking the time to read our articles. We hope you will find this information helpful.


​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.


Did this answer your question?