Sirviendo fuentes desde un CDN

Código para colocar en el archivo .htaccess o httpd.conf de Apache o Nginx

Para un máximo rendimiento todos sabemos que debemos poner nuestros assets en un CDN (otro dominio). Junto con esos assets están las fuentes web personalizadas. Desafortunadamente las fuentes web personalizados a través de un CDN (o cualquier petición de fuentes entre dominios) no funcionan en Firefox o Internet Explorer (de forma correcta) a pesar de que funcionan (incorrectamente) en los navegadores basados "‹"‹en WebKit. Ellas realmente requieren configuraciones personalizadas CORS para funcionar correctamente. Aquí está el código que tendrá que hacer que eso suceda.

El código .htaccess o httpd.conf

El código puede ser colocado en el archivo .htaccess o httpd.conf de Apache o Nginx:

# 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 *;
}


# Otra configuración para Ngnix


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

Esto ajusta la configuración de Access-Control-Allow-Origin CORS para permitirla funcionar en todos los dominios. Una lista de dominios específicos separados por comas si quieres servir fuentes a sólo dominios específicos. También querrás servir adecuadamente todos los tipos de fuentes en el caso de que el navegador prefiera un tipo.

Para asegurarnos que la cabecera está configurada correctamente, se puede comprobar mediante la utilidad curl:

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

Si ves en la respuesta Access-Control-Allow-Origin: *, es que está funcionando.

# Resultado


HTTP/1.1 200 OK
Date: Sun, 26 Jan 2014 23:41:02 GMT
Server: Apache
Accept-Ranges: bytes
Content-Length: 18060
Cache-Control: max-age=315360000, public
Expires: Wed, 24 Jan 2024 21:23:02 GMT
Vary: *,User-Agent
Access-Control-Allow-Origin: *
Content-Type: text/plain; charset=UTF-8

Esta misma estrategia es utilizada por Bootstrap CDN, por lo que sé que es bueno.