Arial Narrow en CSS: pila font-family y código @font-face
Revisado en por el equipo editorial de ArialNarrow.com
Respuesta corta
Escribe font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;. Quien tenga Office verá la fuente real, los usuarios de Linux un clon con el mismo ancho y el resto, Arial. Para que todos los visitantes vean Arial Narrow, compra una licencia web de Monotype y alójala tú mismo con @font-face.
1. Uso básico de font-family (sin licencia)
Este método no cuesta nada ni necesita licencia. Solo nombras la fuente, y el navegador de cada visitante usa su propia copia instalada si la tiene:
.text-arial-narrow {
font-family: 'Arial Narrow', Arial, sans-serif;
}
.text-arial-narrow-bold {
font-family: 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
}Fíjate en el orden de respaldo: los navegadores de macOS o Linux que no tienen Arial Narrow saltan directamente a la Arial estándar (o a su sustituta con métricas compatibles) en lugar de a una tipografía que no tiene nada que ver.
2. Implementación con @font-face (fuente web con licencia)
¿Quieres que todos los visitantes vean lo mismo? Compra una licencia web de Monotype, convierte los archivos a WOFF2, alójalos tú y decláralos así:
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}font-display: swap mantiene el texto visible mientras se descarga el archivo. En las preguntas frecuentes de abajo te explicamos por qué.
3. Pila de respaldo para todos los navegadores
Esta pila ordena las fuentes de la más parecida a la más genérica, para que cada sistema operativo use la mejor que tenga:
font-family: 'Arial Narrow', 'Liberation Sans Narrow',
'Helvetica Neue Condensed', Arial, sans-serif;Liberation Sans Narrow recoge Linux, Helvetica Neue Condensed recoge Mac (solo para texto en negrita, porque macOS solo incluye los pesos Condensed Bold y Black) y Arial, sans-serif cubre el resto.
4. Compatibilidad con navegadores
@font-face y font-display funcionan en todas las versiones actuales de Chrome, Firefox, Safari y Edge. Lo único que importa en la práctica es el formato: sirve .woff2 como formato principal (el archivo más ligero y compatible con todos los navegadores modernos) y añade un .woff de respaldo solo si aún tienes que dar soporte a navegadores de antes de 2016, aproximadamente.
Importante sobre la licencia
Nunca subas a un servidor web el TTF de la carpeta de fuentes de Windows. La licencia de Office no cubre la incrustación web, y las fundiciones envían de verdad avisos por infracción a las webs que la alojan sin licencia. Normas de licencia web de Arial Narrow → ¿Prefieres saltarte la licencia por completo? Google Fonts gratis que se le parecen →
Preguntas frecuentes
¿Por qué font-family: "Arial Narrow" se ve con otra fuente en Mac o Linux?
El navegador solo puede usar las fuentes que tiene el visitante. Arial Narrow viene con Microsoft Office, así que los Mac sin Office y la mayoría de equipos con Linux no la tienen. El navegador baja por tu pila de fuentes sin avisar y usa la siguiente que encuentra, a menudo Liberation Sans Narrow en Linux o la Arial normal en Mac.
¿Qué hace exactamente font-display: swap?
Le dice al navegador que muestre el texto enseguida con una fuente de respaldo y que cambie a la fuente web cuando llegue. Sin esto, algunos navegadores ocultan el texto hasta tres segundos mientras se descarga el archivo. Cambias un pequeño salto de diseño por un texto que se puede leer al instante, y casi siempre compensa.
¿Puedo hacer un subconjunto del archivo de la fuente para que cargue antes?
Sí, siempre que tu licencia permita modificarla. Quita los sistemas de escritura que no uses, como el griego y el cirílico, con pyftsubset de fonttools o con glyphhanger, y el archivo WOFF2 suele quedarse en menos de la mitad. Después añade una línea unicode-range a tu regla @font-face para que el navegador solo lo descargue cuando haga falta.
¿Puedo cargar Arial Narrow desde Google Fonts?
No. Google Fonts solo aloja fuentes de código abierto, y Arial Narrow es privativa. Las más parecidas que sí tiene Google son Roboto Condensed, Archivo Narrow y Barlow Condensed.