¿Cómo cargar archivos de fuentes alojados automáticamente si el servicio GoogleFont no está disponible?

Question

Quiero usar una colección de fuentes del directorio de Google Fonts. Seleccioné los estilos e incluí la etiqueta CSS link en la plantilla de mi proyecto.

Alternativamente, con Google Fonts también puede descargar la colección, y lo que obtiene es un archivo zip con todos los estilos de fuente.

Puedo crear un equivalente de CSS del que Google me da para incluirlo en el HTML, por lo que deseo proporcionar los archivos de fuentes auto alojados como alternativa, si el visitante no puede acceder a la API de Google Font.

¿Cómo configuro esto, y evitando que se descarguen tanto el archivo de fuente de Google como el archivo de fuente alojado automáticamente? Si el usuario tiene acceso a Google Fonts, su navegador no debe descargar la versión alojada de la fuente.

Answer 1

Usted tiene 3 opciones:

1. Use 2 juegos de @font-face en-reglas, usando diferentes nombres font-family (por ejemplo "Droid Sans" y "Droid Sans Local") y, a continuación, utilizando una pila de fuente como "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. Sin embargo, esto hará que ambas fuentes se descarguen, lo que aumenta el tiempo de carga.
2. Utilice un solo conjunto de @font-face at-rules, pero use 2 conjuntos de atributos src. Esto también puede aumentar el tiempo de carga si el navegador decide descargar todos los archivos de fuente especificados.
3. Realice la duplicación en la capa de red a través de DNS, como lo hacen la mayoría de los CDN. Esto requiere una configuración de red, pero su CSS no se modificará, y es más transparente para el navegador, ya que no requiere descargas adicionales.

Google Web Fonts ya está utilizando la tercera opción, por lo que personalmente no me molestaría si ya está usando una fuente alojada en CDN. Pero puede valer la pena si usa fuentes de una fuente menos confiable. Pero si va a realizar el esfuerzo de configurar esto para sus fuentes, ¿por qué no configurarlo para todos sus recursos estáticos (imágenes, hojas de estilo, JS, etc.)? El curso de acción más lógico es obtener un CDN gratuito o pagado para alojar todos sus activos estáticos.

Answer 2

Recomendaría que los autohosting. Esto es fontsprings' sintaxis de fuente y cara "a prueba de balas".

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Tener estos cuatro conjuntos garantizará que funcione en todos los navegadores. Solo asegúrate de tener tu fuente en los cuatro tipos. Font Squirrel tiene grandes kits para fontface también.