CODEWITHSUNDEEP
.htaccessfontscorscross-domainfont-face
Adrien Castagliola
Adrien Castagliola

Reputation: 921

How to get through CORS policy to load fonts?

To get access to my font i use @font-face.

@font-face {
    font-family: 'Brandon Grotesque Regular';
    src: url('http://server/font/brandon_reg-webfont.eot');
    src: url('http://server/font/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://server/font/brandon_reg-webfont.woff2') format('woff2'),
         url('http://server/font/brandon_reg-webfont.woff') format('woff'),
         url('http://server/font/brandon_reg-webfont.ttf') format('truetype'),
         url('http://server/font/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Unfortunetly i'm not able to get access to my fonts, my request has been blocked by CORS policy.

Access to Font at 'http://server/font/brandon_blk-webfont.woff2' from origin 'http://server.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

So I edit a .htaccess 

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

It didn't work either. Any ideas ?

Upvotes: 3

Views: 6805

Answers (1)

Jankyz
Jankyz

Reputation: 1547

This is the solution:

<FilesMatch ".(otf|ttf|eot|woff|woff2)$">
SetEnvIf Origin "^http(s)?://(.+.)?(localhost|yourdomain.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

put this in .htaccess file on your server, where fonts are placed

Upvotes: 2

Related Questions