Modificado por última vez en Domingo, 26 Enero 2014 23:56
(0 votos)

Sirviendo fuentes desde un CDN

fuentes .htaccess

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.


Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento