Polices web auto-hébergées : WOFF2, font-display, préchargement et RGPD
Une police personnalisée donne une voix à un site. Elle peut aussi ralentir son affichage, faire sauter la mise en page et, si elle est chargée depuis un service tiers, transmettre l'adresse IP de chaque visiteur à ce service. Héberger ses polices sur son propre serveur règle la plupart de ces questions, à condition de s'y prendre correctement.
Pourquoi héberger soi-même
Pendant des années, charger une police depuis un service comme Google Fonts a été la solution la plus simple : une ligne dans l'en-tête et le tour est joué. Trois raisons poussent aujourd'hui à faire autrement.
La première est la performance. Une police servie depuis un autre domaine oblige le navigateur à ouvrir une nouvelle connexion, souvent après avoir téléchargé une feuille de style intermédiaire. Servie depuis le même domaine que la page, elle profite de la connexion déjà ouverte et des règles de cache que l'on maîtrise.
La deuxième est la protection des données. Chaque requête vers un serveur tiers lui transmet l'adresse IP du visiteur. Le 20 janvier 2022, le tribunal régional de Munich (Landgericht München I, affaire 3 O 17493/20) a jugé qu'un site qui intégrait Google Fonts de façon dynamique, sans consentement, portait atteinte aux droits d'un visiteur en transmettant son adresse IP à Google ; il a accordé 100 euros de dommages et intérêts et interdit la poursuite de la transmission. Cette décision allemande ne lie pas les juridictions françaises, mais son raisonnement est connu de tous les praticiens du RGPD. Les règles de la CNIL sur les contenus tiers sont traitées dans notre article sur les cookies et le consentement.
La troisième est la maîtrise : version figée de la police, sous-ensembles de caractères choisis, aucune dépendance à un service qui peut changer ses conditions.
Le format : WOFF2
Le W3C a publié WOFF 2.0 comme recommandation en mars 2018 ; la version actuelle de la recommandation est datée du 8 août 2024. Le format compresse les données de la police avec Brotli et un prétraitement adapté aux contours de caractères, avec un objectif annoncé par la spécification : une meilleure compression, donc moins de bande passante. Tous les navigateurs actuels le lisent. Les anciens formats (TTF, EOT, SVG) ne sont plus nécessaires pour un site public récent.
Déclarer la police
Une déclaration @font-face complète ressemble à ceci :
@font-face {
font-family: "Ma Police";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/ma-police-latin.3f2a9c1b.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F, U+20AC;
}font-weight: 400 700déclare une plage : c'est la syntaxe d'une police variable, un seul fichier qui contient toutes les graisses intermédiaires. Pour un site qui utilise trois ou quatre graisses, c'est souvent plus léger que plusieurs fichiers.font-display: swapdemande au navigateur d'afficher le texte tout de suite avec la police de secours, puis de remplacer par la police web quand elle arrive. Le texte n'est jamais invisible.unicode-rangelimite le fichier aux caractères utilisés. Un site en français a besoin du latin de base, des lettres accentuées, de « œ », des guillemets et de l'euro ; un second fichier « latin étendu » ne sera téléchargé que si une page en contient.- Un nom de fichier qui change avec le contenu (ici un fragment d'empreinte) permet de mettre le fichier en cache pour un an sans risque : une nouvelle version aura un autre nom.
Précharger, avec modération
Le navigateur ne découvre une police qu'après avoir lu la feuille de style. Une balise <link rel="preload" as="font" type="font/woff2" crossorigin> dans l'en-tête lui permet de la demander plus tôt. L'attribut crossorigin est nécessaire même quand la police est sur le même domaine, faute de quoi elle risque d'être téléchargée deux fois.
Le préchargement est une ressource rare : chaque fichier préchargé passe devant les autres. Une ou deux polices, celles du texte courant et des titres visibles en haut de page, suffisent. Précharger aussi l'italique, les graisses rares ou le latin étendu retarde souvent l'image principale, et dégrade le LCP que l'on voulait améliorer : voir notre article sur les Core Web Vitals.
Limiter le saut de mise en page
Avec swap, la bascule de la police de secours vers la police web peut modifier la longueur des lignes et faire bouger la page. Choisir une police de secours aux proportions proches, définir une pile de polices système cohérente, et garder les fichiers légers réduisent ce décalage. Les descripteurs CSS d'ajustement de métriques, comme size-adjust, permettent d'aller plus loin pour aligner la police de secours sur la police finale.
Vérifier la licence
Héberger une police, c'est la distribuer depuis son serveur : la licence doit le permettre. Les polices publiées sous SIL Open Font License, comme la plupart de celles du catalogue de Google Fonts, autorisent l'usage, l'intégration et la redistribution, y compris dans un projet commercial, à condition de ne pas vendre la police seule et de respecter les règles sur les noms réservés. Les polices commerciales ont des licences web spécifiques, souvent limitées en nombre de pages vues ou de domaines. Dans un thème WordPress distribué, les règles du répertoire officiel exigent en outre que toutes les ressources incluses soient compatibles avec la GPL : la licence OFL l'est.
Dans un thème WordPress
Les thèmes blocs peuvent déclarer leurs familles de polices et leurs fichiers dans theme.json, ce qui les rend disponibles dans l'interface Styles. Sur un thème classique, il suffit de placer les fichiers dans le dossier du thème et d'écrire les @font-face dans la feuille de style. Dans les deux cas, pensez à supprimer toute requête résiduelle vers un service de polices externe, parfois ajoutée par une extension ou par le thème parent. Pour bien choisir et composer ces polices en français, voir notre article sur la typographie française à l'écran.
Sources
- W3C, « WOFF File Format 2.0 », recommandation du 8 août 2024 (première recommandation : 1er mars 2018).
- Landgericht München I, jugement du 20 janvier 2022, 3 O 17493/20 (Google Fonts), d'après les comptes rendus des chambres de commerce et d'industrie allemandes.
- W3C, CSS Fonts Module Level 4 (descripteurs
font-display,unicode-range,size-adjust). - Make WordPress Themes, Theme Handbook, « Required » (ressources incluses et licences).
Performance & typographieLa typographie française à l'écran
Espaces insécables, guillemets, césure, longueur de ligne : les règles qui font qu'un texte français se lit bien sur un écran.
Performance & typographieCore Web Vitals : LCP, INP, CLS
Affichage, réactivité, stabilité : les trois mesures, leurs seuils, et ce qu'un thème WordPress peut faire pour chacune.
Performance & typographieLes images responsives
srcset, sizes, lazy, fetchpriority, width et height : les attributs qui font qu'une image s'affiche vite, sans faire bouger la page.