Search code examples
fontsfont-facefont-awesome

@font-face works on local server but not on production server - how to debug?


My fonts were displaying perfectly in my local server using @font-your-face with any browser, but after uploading it to the production site (https://kenverse.com), the fonts won't load in Chrome, FF or IE10, but it loads perfectly in Torch and Safari.

While viewing page source, I see that @import url("{filepath}" was correctly called. When I've pasted the url into the address bar I see that the files are there, along with the fonts.

Firebug tells me that the fonts are loaded

GET fontawesome-webfont.woff

200 OK

So does google chrome

fontawesome-webfont.woff www.kenverse.com/sites/kenverse.com/files/fontyourface/local_fonts/Font_Awesome-normal-normal GET 200 OK

Please help me with his problem, thank you! Im using Drupal CMS, and the drupal SE people asked me to move the topic over here.


Solution

  • Solved by adding the following code to my .htaccess

    <FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://mysite.com"
    </IfModule>
    </FilesMatch>
    

    credits to the first answer at @font-face not working on chrome. Thank you so much.