La propiedad @font-face en CSS permite a los desarrolladores web utilizar fuentes personalizadas que no están instaladas en el dispositivo del usuario. Esto es particularmente útil para asegurar la consistencia del diseño a través de diferentes sistemas operativos y navegadores. En este artículo, exploraremos cómo configurar fuentes y estilos utilizando @font-face, incluyendo ejemplos prácticos y mejores prácticas.
El uso de fuentes personalizadas no solo mejora la estética de un sitio web, sino que también puede contribuir a la experiencia del usuario y a la identidad de la marca. Con @font-face, puedes cargar fuentes desde un servidor o incluso incluirlas en tu propio código.
Configuración básica de @font-face
Para usar @font-face, debes definir la fuente en tu CSS. El siguiente es un ejemplo básico de cómo hacerlo:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff'),
url('fonts/mycustomfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
En este block de código:
- font-family: Define el nombre de la fuente que podrás utilizar en otros estilos CSS.
- src: Especifica las ubicaciones y formatos de los archivos de fuente.
- font-weight: Define el grosor de la fuente (normal, bold, etc.).
- font-style: Define si la fuente es normal, cursiva, etc.
Es importante mencionar que es recomendable ofrecer múltiples formatos de fuente para asegurar la compatibilidad entre navegadores. Puedes consultar esta guía de compatibilidad para obtener más detalles.
Aplicación de la fuente en CSS
Una vez que la fuente ha sido definida con @font-face, se puede aplicar a los elementos HTML utilizando la propiedad font-family:
body {
font-family: 'MyCustomFont', sans-serif;
}
En este caso, si por alguna razón la fuente no se carga, el navegador caerá en el tipo de letra sans-serif como respaldo.
Consideraciones de rendimiento
El uso de @font-face puede impactar en el tiempo de carga de tu sitio web. Aquí hay algunas consideraciones clave para optimizar su uso:
- Subir solo los caracteres necesarios: Si solo necesitas ciertos caracteres, considera subir solo esos caracteres para reducir el tamaño del archivo.
- Usar formatos de fuentes optimizados: Los formatos
woffywoff2son generalmente más ligeros y se cargan más rápido que otros formatos comottf. - Implementar técnicas de carga: Utiliza la carga de fuentes de manera asíncrona para evitar bloquear el renderizado del texto. Esto se puede lograr usando la propiedad
font-display.
Errores comunes
Existen varios errores comunes al utilizar @font-face, tales como:
- No proporcionar suficientes formatos de archivo, lo que podría resultar en fuentes no cargadas en ciertos navegadores.
- Rutas incorrectas a los archivos de fuente, lo que provoca que no se visualicen.
- No incluir el tipo
font-display: swap;, lo que puede llevar a un contenido invisible durante la carga de la fuente.
FAQ
1. ¿Qué es @font-face y para qué se utiliza?
La regla @font-face se utiliza para cargar fuentes personalizadas dentro de un documento CSS, permitiendo que los desarrolladores web utilicen tipografías que no están disponibles por defecto en los dispositivos de los usuarios, garantizando así una mayor coherencia visual.
2. ¿Cuáles son los formatos de fuentes más recomendados para usar?
Es aconsejable utilizar woff y woff2 debido a su compresión y tiempos de carga más rápidos. El formato truetype (ttf) también es válido, pero menos recomendado en comparación con woff.
3. ¿Cómo puedo evitar que mi sitio se bloquee debido a la carga de fuentes?
Utiliza la propiedad font-display con valores como swap o fallback para permitir que el texto se muestre inmediatamente utilizando una fuente alternativa mientras se carga la fuente personalizada.
4. ¿Existen límites en el uso de @font-face?
No hay un límite técnico en la cantidad de fuentes que puedes definir, pero es recomendable no sobrecargar el sitio con muchas fuentes, ya que esto puede afectar la velocidad de carga y rendimiento general.
5. ¿Qué sucede si una fuente no se carga?
Si una fuente definida con @font-face no se carga, el navegante utilizará la fuente de respaldo que has definido en la propiedad font-family, asegurando que el texto aún sea legible.
6. ¿Cómo puedo verificar si las fuentes se están cargando correctamente?
Puedes usar herramientas de desarrollo del navegador, como la pestaña de “Red” en Chrome DevTools, para comprobar las solicitudes de fuente y asegurarte de que se están cargando correctamente.
7. ¿Puedo usar @font-face en archivos CSS en línea?
Sí, puedes incluir la regla @font-face dentro de un estilo en línea, pero es más común y recomendable mantener el CSS separado para un mejor mantenimiento y rendimiento.
8. ¿Cuál es la diferencia entre @font-face y Google Fonts?
@font-face te permite cargar fuentes personalizadas desde tu propio servidor, mientras que Google Fonts ofrece una biblioteca de fuentes listas para usar y optimizadas, con un sencillo método de inclusión a través de un enlace en tu <head>.
9. ¿Es necesario añadir estilos para fuentes de iconos utilizando @font-face?
Para las fuentes de iconos, puedes utilizar @font-face, pero generalmente se prefiere implementar fuentes de iconos a través de bibliotecas como Font Awesome, ya que estas están optimizadas y probadas para su uso.
10. ¿Las fuentes personalizadas afectan el SEO?
Las fuentes personalizadas en sí mismas no afectan el SEO, pero un manejo ineficiente de la carga de fuentes puede impactar negativamente en la experiencia del usuario y la velocidad del sitio, lo cual sí puede influir en el SEO.
Conclusión
La regla @font-face es una herramienta poderosa que permite a los desarrolladores web utilizar fuentes personalizadas en sus diseños. Si bien ofrece una gran flexibilidad y opciones de branding, es crucial implementarla adecuadamente para evitar problemas de rendimiento. Recuerda siempre optimizar los formatos de fuente, proporcionar alternativas y aplicar mejores prácticas de carga para asegurar la mejor experiencia posible para el usuario.
