How to add an Access-Control-Allow-Origin header

by

So what you do is… In the font files folder put an htaccess file with the following in it.

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

also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files):

e.g.

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with "*" however you can limit it to:

A single URL:

Header set Access-Control-Allow-Origin http://example.com

Or a comma-delimited list of URLs

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Multiple values are not supported in current implementations)

More Related Contents:

  1. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  2. What does a zlib header look like?
  3. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  4. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  5. How to create sticky header bar for a website
  6. How can I fix the ‘Missing Cross-Origin Resource Sharing (CORS) Response Header’ webfont issue?
  7. Origin is not allowed by Access-Control-Allow-Origin
  8. how to bypass Access-Control-Allow-Origin?
  9. A CORS POST request works from plain JavaScript, but why not with jQuery?
  10. Spring Data Rest and Cors
  11. Tool to track #include dependencies [closed]
  12. Origin is not allowed by Access-Control-Allow-Origin
  13. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  14. How to make CORS Authentication in WebAPI 2?
  15. HTTP Range header
  16. How to use CORS to implement JavaScript Google Places API request
  17. Content Transfer Encoding 7bit or 8 bit
  18. Spring CORS No ‘Access-Control-Allow-Origin’ header is present
  19. Make Adobe fonts work with CSS3 @font-face in IE9
  20. Why has it failed to load main-class manifest attribute from a JAR file?
  21. Detect if PDF file is correct (header PDF) [closed]
  22. Can’t send a post request when the ‘Content-Type’ is set to ‘application/json’
  23. Multiple font-weights, one @font-face query
  24. @Font-face not working on mobile
  25. Laravel 5.2 CORS, GET not working with preflight OPTIONS
  26. Why is Access-Control-Expose-Headers needed?
  27. error: Class has not been declared despite header inclusion, and the code compiling fine elsewhere
  28. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
  29. XMLHttpRequest: Network Error 0x80070005, Access is denied on Microsoft Edge (but not IE)
  30. Angular 2 Spring Boot Login CORS Problems

Leave a Comment