La @font-faceregla permite cargar fuentes personalizadas en una página web. Una vez agregada a una hoja de estilo, la regla le indica al navegador que descargue la fuente desde donde está alojada y luego la muestre como se especifica en el CSS.
Sin la regla, nuestros diseños se limitan a las fuentes que ya están cargadas en la computadora de un usuario, las cuales varían según el sistema que se utilice. Aquí hay un buen desglose de las fuentes del sistema existentes.
Soporte de navegador más profundo posible
Este es el método con el mayor apoyo posible en este momento. La @font-faceregla debe agregarse a la hoja de estilo antes de cualquier estilo.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Luego úselo para diseñar elementos como este:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Nivel práctico de compatibilidad con el navegador
Las cosas están cambiando fuertemente hacia WOFF y WOFF 2, por lo que probablemente podamos salirse con la nuestra:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Soporte de navegador un poco más profundo
Si necesita una especie de medio feliz entre el apoyo total y el apoyo práctico, esto cubrirá algunas bases más:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Soporte de navegador súper progresivo
Si estamos apostando la granja en WOFF, entonces podemos esperar que las cosas cambien hacia WOFF2 en algún momento. Eso significa que podemos vivir a la vanguardia con:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 36+ | No | 35+ con bandera | 23+ | No | 37 | No |
Técnicas alternativas
@import
Si bien @font-facees excelente para fuentes alojadas en nuestros propios servidores, puede haber situaciones en las que una solución de fuentes alojadas sea mejor. Google Fonts ofrece esto como una forma de utilizar sus fuentes. El siguiente es un ejemplo del uso @importpara cargar la fuente Open Sans desde Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Entonces podemos usarlo para diseñar elementos:
body ( font-family: 'Open Sans', sans-serif; )Si abre la URL de la fuente, puede ver todo el @font-facetrabajo que se está realizando detrás de escena.
Una ventaja de utilizar un servicio alojado es que es probable que incluya todas las variaciones del archivo de fuente, lo que garantiza una compatibilidad profunda entre navegadores sin tener que alojar todos esos archivos nosotros mismos.
Vea el lápiz usando @import para fuentes personalizadas por CSS-Tricks (@ css-tricks) en CodePen.
haciendo una hoja de estilo
Del mismo modo, puede vincular al mismo activo que lo haría con cualquier otro archivo CSS, en el documento HTML en lugar de en el CSS. Usando el mismo ejemplo de Google Fonts, esto es lo que usaríamos:
Luego, podemos diseñar nuestros elementos como los otros métodos:
body ( font-family: 'Open Sans', sans-serif; )Nuevamente, esto es importar las @font-facereglas pero, en lugar de inyectarlas en nuestra hoja de estilo, se agregan a nuestro HTML .
Consulte el uso del lápiz para obtener fuentes personalizadas de CSS-Tricks (@ css-tricks) en CodePen.
Se trata de lo mismo ... ambas técnicas descargan los activos necesarios.
Comprensión de los tipos de archivos de fuentes
El fragmento original en la parte superior de esta publicación hace referencia a muchos archivos con extensiones extrañas. Repasemos cada uno y comprendamos mejor lo que significan.
WOFF / WOFF2
Significa: Web Open Font Format.
Creadas para su uso en la web y desarrolladas por Mozilla junto con otras organizaciones, las fuentes WOFF a menudo se cargan más rápido que otros formatos porque usan una versión comprimida de la estructura utilizada por las fuentes OpenType (OTF) y TrueType (TTF). Este formato también puede incluir metadatos e información de licencia dentro del archivo de fuente. Este formato parece ser el ganador y hacia donde se dirigen todos los navegadores.
WOFF2 es la próxima generación de WOFF y cuenta con una mejor compresión que el original.
SVG / SVGZ
Significa: Gráficos vectoriales escalables (fuente)
SVG es una recreación vectorial de la fuente, lo que la hace mucho más liviana en tamaño de archivo y también la hace ideal para uso móvil. Este formato es el único permitido por la versión 4.1 y anteriores de Safari para iOS. Las fuentes SVG no son compatibles actualmente con Firefox, IE o IE Mobile. Firefox ha pospuesto la implementación indefinidamente para centrarse en WOFF.
SVGZ es la versión comprimida de SVG.
EOT
Significa: Tipo abierto integrado.
Este formato fue creado por Microsoft (los innovadores originales de @font-face) y es un estándar de archivo patentado que solo admite IE. De hecho, es el único formato que IE8 y versiones inferiores reconocerán cuando se utilicen @font-face.
OTF / TTF
Significa: fuente OpenType y fuente TrueType.
El formato WOFF se creó inicialmente como reacción a OTF y TTF, en parte, porque estos formatos podrían copiarse fácilmente (e ilegalmente). Sin embargo, OpenType tiene capacidades en las que muchos diseñadores podrían estar interesados (ligaduras y demás).
Una nota sobre el rendimiento
Las fuentes web son excelentes para el diseño, pero también es importante comprender su impacto en el rendimiento web. Las fuentes personalizadas a menudo hacen que los sitios sufran un impacto en el rendimiento porque la fuente debe descargarse antes de mostrarse.
Un síntoma común solía ser un breve momento en el que las fuentes se cargan primero como respaldo y luego parpadean hasta la fuente descargada. Paul Irish tiene una publicación más antigua sobre esto (apodada "FOUT": Flash Of Unstyled Text).
En estos días, los navegadores generalmente ocultan el texto antes de que se cargue la fuente personalizada de forma predeterminada. ¿Mejor o peor? Tú decides. Puede ejercer cierto control sobre esto a través de varias técnicas. Un poco fuera del alcance de este artículo, pero aquí hay una trifecta de artículos de Zach Leatherman para comenzar por la madriguera del conejo:
- Mejor @ font-face con Eventos de carga de fuentes
- Cómo usamos las fuentes web de manera responsable, o evitando una @ font-face-palm
- Destello de texto falso: aún más sobre la carga de fuentes
Aquí hay algunas consideraciones más al implementar fuentes personalizadas:
Mira el tamaño del archivo
Las fuentes pueden ser sorprendentemente pesadas, así que apóyate en opciones que ofrezcan versiones más ligeras. Por ejemplo, prefiera un conjunto de fuentes de 50 KB frente a uno que pese 400 KB.
Limite el juego de caracteres, si es posible
¿Realmente necesitas los pesos en negrita y negro para una fuente? Limitar sus conjuntos de fuentes para cargar solo lo que se usa es una buena idea y hay algunos buenos consejos al respecto aquí.
Considere las fuentes del sistema para pantallas pequeñas
Muchos dispositivos están atascados en malas conexiones. Un truco podría ser apuntar a pantallas más grandes al cargar la fuente personalizada usando @media.
En este ejemplo, las pantallas de menos de 1000 px recibirán una fuente del sistema en su lugar y las pantallas de ese ancho y superiores recibirán la fuente personalizada.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Servicios de fuentes
Hay una serie de servicios que alojarán fuentes y también proporcionarán acceso a fuentes con licencia comercial. Los beneficios de usar un servicio a menudo se reducen a tener una gran selección de fuentes legales entregadas de manera eficiente (por ejemplo, servirlas en un CDN rápido).
A continuación, se muestran algunos servicios de fuentes alojados:
- Tipografía de nube
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Fuentes de Google
- Ardilla
¿Qué pasa con las fuentes de iconos?
Es cierto, @ font-face puede cargar un archivo de fuente lleno de íconos que se pueden usar para un sistema de íconos. Sin embargo, creo que es mucho mejor usar SVG como un sistema de iconos. Aquí hay una comparación de los dos métodos.
Más recursos
- Conceptos básicos de la API de fuentes de Google
- Familias de fuentes CSS