Arial Narrow en CSS : pile font-family et code @font-face
Mis à jour en par la rédaction d’ArialNarrow.com
En bref
Écrivez font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;. Les visiteurs équipés d’Office voient la vraie police, les utilisateurs de Linux un clone de même chasse, et tous les autres Arial. Pour montrer Arial Narrow à tous vos visiteurs, achetez une licence web Monotype et hébergez-la vous-même avec @font-face.
1. Utilisation de base de font-family (aucune licence requise)
Cette méthode ne coûte rien et ne demande aucune licence. Vous vous contentez de nommer la police, et le navigateur de chaque visiteur utilise sa propre copie installée s’il en a une :
.text-arial-narrow {
font-family: 'Arial Narrow', Arial, sans-serif;
}
.text-arial-narrow-bold {
font-family: 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
}Notez l’ordre des polices de secours : sur macOS ou Linux, un navigateur sans Arial Narrow passe directement à l’Arial standard (ou à son équivalent métrique) au lieu d’une police sans aucun rapport.
2. Mise en place avec @font-face (police web sous licence)
Vous voulez que tous les visiteurs voient la même chose ? Achetez une licence web Monotype, convertissez les fichiers en WOFF2, hébergez-les vous-même et déclarez-les ainsi :
@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 garde le texte visible pendant le téléchargement du fichier. La FAQ ci-dessous explique pourquoi.
3. Pile de secours multinavigateur
Cette pile classe les polices de la plus proche à la plus générique, pour que chaque système d’exploitation tombe sur la meilleure police dont il dispose :
font-family: 'Arial Narrow', 'Liberation Sans Narrow',
'Helvetica Neue Condensed', Arial, sans-serif;Liberation Sans Narrow rattrape Linux, Helvetica Neue Condensed rattrape les Mac (pour le gras uniquement, car macOS ne fournit que les graisses Condensed Bold et Black), et Arial, sans-serif couvre le reste.
4. Compatibilité des navigateurs
@font-face et font-display sont pris en charge par toutes les versions actuelles de Chrome, Firefox, Safari et Edge. Le seul vrai point d’attention est le format : servez du .woff2 en priorité (fichier le plus léger, pris en charge partout aujourd’hui), avec un .woff de secours uniquement si vous devez encore gérer des navigateurs antérieurs à 2016 environ.
Important : la question de la licence
N’envoyez jamais sur un serveur web le TTF de votre dossier Polices de Windows. La licence Office ne couvre pas l’intégration web, et les fonderies envoient bel et bien des mises en demeure aux sites qui hébergent une police sans licence. Les règles de licence web d’Arial Narrow → Vous préférez éviter complètement la question de la licence ? Des Google Fonts gratuites qui lui ressemblent →
Questions fréquentes
Pourquoi font-family: "Arial Narrow" s’affiche-t-elle avec une autre police sur Mac ou Linux ?
Le navigateur ne peut utiliser que les polices présentes chez le visiteur. Arial Narrow est fournie avec Microsoft Office : les Mac sans Office et la plupart des machines Linux ne l’ont pas. Le navigateur descend alors votre pile de polices sans prévenir et prend la suivante qu’il trouve, souvent Liberation Sans Narrow sous Linux ou Arial tout court sur Mac.
Que fait vraiment font-display: swap ?
Il demande au navigateur d’afficher tout de suite le texte dans une police de secours, puis de basculer sur la police web dès qu’elle arrive. Sans lui, certains navigateurs masquent le texte jusqu’à trois secondes le temps du téléchargement. Vous échangez un léger décalage de mise en page contre un texte lisible immédiatement, et ça vaut presque toujours le coup.
Peut-on alléger le fichier de police pour qu’il charge plus vite ?
Oui, si votre licence autorise la modification. Retirez les écritures que vous n’utilisez jamais, comme le grec et le cyrillique, avec pyftsubset (fonttools) ou glyphhanger : le fichier WOFF2 perd souvent plus de la moitié de son poids. Ajoutez ensuite une ligne unicode-range à votre règle @font-face pour que le navigateur ne le télécharge qu’en cas de besoin.
Peut-on charger Arial Narrow depuis Google Fonts ?
Non. Google Fonts n’héberge que des polices libres, et Arial Narrow est propriétaire. Les polices les plus proches disponibles chez Google sont Roboto Condensed, Archivo Narrow et Barlow Condensed.