CSS @font-face

@font-face es la regla at-rule de CSS que le dice al navegador dónde encontrar un archivo de fuente y cómo llamarlo. Fue compatible por primera vez en IE 4 en 1997, pero solo se volvió práctica en todos los navegadores alrededor de 2010 cuando llegó WOFF y otros navegadores implementaron la regla de manera consistente.

Para las fuentes de iconos, @font-face es el pegamento entre sus archivos de fuentes y las clases CSS que muestran iconos. Sin ella, el navegador no tiene forma de saber que font-family: 'MyIcons' debe cargar un archivo específico de su servidor.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

El descriptor font-family le da a la fuente un nombre al que hará referencia más adelante. El descriptor src le dice al navegador dónde descargar el archivo y en qué formato está. Los descriptores font-weight y font-style aseguran que el navegador no intente sintetizar variantes en negrita o cursiva. Y font-display controla lo que sucede mientras se carga la fuente.

La indicación format() después de cada URL le dice al navegador en qué formato está el archivo, para que pueda omitir los formatos que no admite sin descargarlos primero. A lo largo de los años, el conjunto recomendado de formatos se ha reducido drásticamente a medida que la compatibilidad del navegador ha mejorado.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Con una cobertura del 97 %+ de los navegadores, WOFF2 solo es suficiente para la gran mayoría de los proyectos modernos. Este es el enfoque más simple y eficiente.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Agregar WOFF como alternativa cubre IE 11, que no soporta WOFF2. Los navegadores modernos tomarán el archivo WOFF2; IE 11 recurrirá a WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

La pila «a prueba de balas» completa incluye EOT para IE 6-8, WOFF2 para navegadores modernos, WOFF para IE 9-11 y TTF como último recurso. El navegador prueba cada entrada src en orden y usa el primer formato que entiende. Este enfoque solo es necesario para proyectos con requisitos heredados extremos.

El patrón estándar para las fuentes de iconos usa una clase base que establece la familia de fuentes y los estilos de renderizado compartidos, luego clases de iconos individuales que usan pseudo-elementos ::before con content establecido en el punto de código Unicode de cada icono.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

La clase base restablece el estilo de fuente para evitar que el navegador aplique transformaciones en negrita, cursiva u otras que distorsionarían los iconos. Las propiedades -webkit-font-smoothing y -moz-osx-font-smoothing activan el suavizado para un renderizado más nítido en macOS e iOS.

Cada clase de icono establece un pseudo-elemento ::before con el punto de código Unicode asignado a ese glifo. La notación barra invertida-E (\E001) es la forma en que CSS referencia un carácter Unicode por su punto de código hexadecimal.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Tanto <i> como <span> funcionan igual de bien. El elemento en sí está vacío — el icono se renderiza completamente por el pseudo-elemento ::before.

El descriptor font-display controla lo que muestra el navegador mientras el archivo de fuente todavía se está descargando. Esto es fundamental para las fuentes de iconos porque una configuración incorrecta puede hacer que los iconos sean invisibles durante la carga de la página.

Para las fuentes de iconos, swap es la opción recomendada. Un breve destello de contenido sin estilo (donde los puntos de código de los iconos podrían aparecer como cuadrados o espacios en blanco) es mucho mejor que los iconos invisibles. Con block, los usuarios podrían ver espacio vacío donde deberían estar los iconos durante hasta 3 segundos en conexiones lentas — lo que parece una página rota. Con swap, los iconos aparecen tan pronto como se carga la fuente, y la transición suele ser imperceptible en conexiones modernas.

Los archivos de fuentes bloquean el renderizado por defecto — el navegador no pintará texto usando una fuente personalizada hasta que el archivo se haya descargado. A continuación se presentan técnicas para minimizar el impacto:

• Precargue el archivo de fuente — use <link rel="preload"> para comenzar a descargar la fuente lo antes posible, antes de que el navegador analice el CSS que la referencia.
• Aloje sus fuentes usted mismo — servir archivos de fuentes desde el mismo origen que su HTML evita búsquedas DNS adicionales y configuración de conexión, y elimina problemas CORS.
• Cree un subconjunto de su fuente — elimine los iconos no utilizados para reducir el tamaño del archivo. Una fuente de 500 iconos donde solo usa 50 está desperdiciando el 90 % de la descarga.
• Use unicode-range — si tiene varios conjuntos de iconos, este descriptor le dice al navegador que solo descargue el archivo de fuente cuando los caracteres en el rango especificado se usen realmente en la página.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

El atributo crossorigin es necesario incluso para fuentes del mismo origen — esta es una peculiaridad de la especificación de carga de fuentes. Sin él, el navegador descargará la fuente dos veces: una desde la indicación de precarga (sin CORS) y otra desde la regla @font-face (con CORS).

• Errores CORS — los archivos de fuentes servidos desde un origen diferente (por ejemplo, un subdominio de CDN) necesitan encabezados Access-Control-Allow-Origin en el servidor. Alternativamente, use el atributo crossorigin en la etiqueta <link>. Sin una configuración CORS adecuada, el navegador bloqueará la fuente silenciosamente.
• Iconos que se muestran como cuadrados o rectángulos — esto generalmente significa que la ruta del archivo de fuente es incorrecta, la fuente aún no se ha cargado, o el nombre font-family en la clase de icono no coincide con el nombre en la declaración @font-face. Revise la pestaña Red de su navegador para confirmar que el archivo de fuente se cargó con estado 200.
• Iconos que muestran glifos incorrectos — conflictos de puntos de código Unicode con fuentes del sistema. Si su fuente de iconos usa puntos de código en rangos que se solapan con fuentes del sistema comunes, el navegador podría renderizar un carácter del sistema en su lugar. Las fuentes de iconos típicamente usan el Área de Uso Privado (U+E000 a U+F8FF) para evitar esto.