¡Es hora de otro screencast de emparejamiento! Esta vez tengo a Zach Leatherman, de Filament Group. Zach ha investigado, escrito y hablado mucho sobre la carga de fuentes web en los últimos años. ¡Tiene una guía completa al respecto!
Hay algunos problemas con la forma predeterminada en que se cargan las fuentes personalizadas. Como en, simplemente vinculando una fuente en algún CSS a través de @ font-face. Incluso la forma en que Google Fonts le brinda el uso de sus fuentes, Zach llama un anti-patrón (en última instancia, es solo vainilla @ font-face). Los diferentes navegadores hacen cosas diferentes con @ font-face. Por ejemplo, algunas versiones de Safari hacen que el tipo de letra configurado en una fuente personalizada sea invisible hasta que la fuente se carga, pero no tiene tiempo de espera, por lo que si la fuente falla por cualquier motivo, podría estar en el peor de los casos: texto siempre invisible en el sitio.
No tiene mucho control sobre cómo se cargan las fuentes @ font-face, a menos que tome el asunto en sus propias manos. Eso significa cosas como: insertar la fuente, crear subconjuntos de la fuente (ya sea con un conjunto "crítico" de glifos o al menos reducir los glifos al idioma en uso), usar cargadores de fuentes para determinar cuándo se cargan las fuentes y modificar las clases para usarlas . Ese último es particularmente interesante. Al ejercer control sobre la carga de fuentes, no solo tiene que lidiar con cuándo / cómo el navegador carga el CSS que contiene @ font-face, sino también cuándo / cómo el navegador encuentra elementos de texto a los que se les dice que usen esas fuentes. Las fuentes que no se utilizan no se descargan. Entonces, a veces el procedimiento es forzarlos a descargar, esperar a que se descarguen y luego aplicar clases para usarlos realmente.
Algunas herramientas que analizamos:
- Firefox DevTools fue mejor para ver las fuentes en uso
- Se pueden crear subconjuntos de fuentes en el generador de Font Squirrel o en Font Prep.
- ¿Qué glifos subconjuntos? Pruebe lo que necesita en determinadas URL con Glyphhanger.
- ¿Cómo se sabe cuando el navegador usa negrita / cursiva falsa? paso en falso.
