0

so i'm trying to fix @font-face problem with firefox, i'm using rails4/ruby2 So i try to put my .htaccess in /public folder, and serving font files in /public folder too, but the request still are being blocked, someone can help about this?

.htaccess file in /public folder:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
Wagner Moreira
  • 1,033
  • 1
  • 16
  • 40

2 Answers2

1

Here you go, actually require custom CORS configurations to display font properly. Here's the code you'll need to make that happen.

The .htaccess or httpd.conf Code

The code can be placed with the .htaccess file or httpd.conf file:

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

# 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. You'll want to serve up all font types appropriately in the case that the browser prefers one type.

To ensure the header is set properly, you can check using the curl utility:

$ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf

# Result
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Cache-Control: max-age=604795
Expires: Wed, 19 Jun 2013 16:22:58 GMT
Date: Wed, 12 Jun 2013 16:23:03 GMT
Connection: keep-alive

If you see Access-Control-Allow-Origin: * in the response, you're golden!

This same strategy is used by Bootstrap CDN, so you know it's good!

Here some more useful links related to your problem:

  1. Bootstrap 3 Glyphicons are not working
  2. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  3. http://logicalfriday.com/2012/03/21/cross-domain-font-woes-in-firefox/
Community
  • 1
  • 1
Sumit Munot
  • 3,748
  • 1
  • 32
  • 51
  • Hello thanks for your answer! i tried to put your config in .htaccess(i'm using nginx), in /public folder of my web application, but the curl -i don't returns Access-Control-Allow-Origin: * any other idea? – Wagner Moreira Jul 14 '14 at 14:53
  • What you are getting in response instead? – Sumit Munot Jul 14 '14 at 15:07
  • returns: `HTTP/1.1 200 OK Content-Type: application/octet-stream Content-Length: 42552 Connection: keep-alive Status: 200 OK Cache-Control: public, must-revalidate Last-Modified: Mon, 14 Jul 2014 14:27:54 GMT ETag: "6f39815cff0a9827509737e64baa859b" X-Request-Id: ce1c8bc8-2379-49b4-b126-3df78eebd93d X-Runtime: 0.000526 X-Powered-By: Phusion Passenger 4.0.38 Date: Mon, 14 Jul 2014 15:54:47 GMT Server: nginx/1.6.0 + Phusion Passenger 4.0.38` just addded font types to nginx/conf/includes/mime.types, in nginx htaccess dont works – Wagner Moreira Jul 14 '14 at 15:56
  • Looking in to this. Get back to you soon. – Sumit Munot Jul 14 '14 at 16:16
0

I've found the fix:

Whe you using nginx, just need to add the header in flie: files/roles/ads/usr/local/nginx/conf/includes/apps.conf

This code allows the route:

server {
      listen 80;

      include includes/environment.conf;

      location /my-page-url/ {
             rewrite /my-page-url/(.*) /$1 break;
             add_header Access-Control-Allow-Origin *;
      }
}
Wagner Moreira
  • 1,033
  • 1
  • 16
  • 40