Héctor Palma Téllez

Pensamientos en .markdown

@font-face en Firefox

| Comentarios

Estaba revisando un sitio que armé en base a Foundation y caché que en Firefox había un error: usé una fuente con íconos y en Chrome se veían bien, pero en Firefox sólo veía cuadraditos vacíos. Me puse a googlear un poco y llegué a un artículo de Stack Overflow donde se habla del uso de @font-face en Firefox cuando el sitio usa un CDN, como el prototipo que me dio el problema del que escribo ahora.

La solución

Resulta que cuando usas un CDN, como hago en el sitio que menciono, cambia la URL desde donde llamas a los archivos que crean y pintan la página que se visita, por lo que cuenta como un dominio externo, cosa que Firefox no permite. Para solucionarlo, debes crear un .htaccess en la carpeta donde están todas las fuentes que estés llamando, en todas sus extensiones (te apuesto que la tuya se llama fonts, como la mía). El contenido de este .htaccess es el siguiente:

.htacccess a crear (font-face-firefox.html) download
1
2
3
4
5
<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Luego de eso, Firefox debería dejar que se haga @font-face desde cualquier dominio. Si no quedó claro, puede revisar en este otro artículo (en inglés).

Recursos

Pantallazo de Fontello Si necesitas fuentes con íconos, recomiendo Fontello donde puedes crear un archivo con los caracteres que necesites. Después exportas lo necesario para hacer el proceso donde necesites. Por ejemplo, en este mismo sitio lo tengo para los íconos de redes donde tengo cuentas (visible a la derecha, en el sidebar y en el footer).

CDN

En CDN no tengo mucha experiencia, pero una vez leí que es bacán para sitios con harto tráfico. Otra vez, varios meses después, caché que había una oferta para comprar 1 TB de tráfico en MaxCDN por 1 dólar, así que usé algo de lo poquito que me quedaba en Paypal para eso. Meses después, me di cuenta que en realidad nunca lo necesité, porque no he gastado ni 1 GB. De todas maneras, lo tengo a mano para usarlo cuando me salga algo en donde necesite que se cargue todo más rápido (porque sí comprobé que acelera la descarga de un sitio).

Conclusión

Si queda alguna duda, están los comentarios y las otras vías por donde contactarme. Saludos cordiales y un abrazo a todos. Carpe Diem, Memento mori, Wingardium leviosa y esas cosas bonitas que dice la gente que lee harto.

Comentarios