Chercheur de paires Google Fonts

À propos du chercheur de paires Google Fonts

Trouvez la combinaison idéale de polices Google Fonts pour vos projets web. Prévisualisez les titres et les paragraphes en temps réel sur plusieurs mises en page et exportez un CSS prêt à intégrer.

Qu'est-ce qui fait que deux polices s'associent bien ?

Les bonnes associations offrent un contraste visuel tout en maintenant une harmonie — typiquement en mélangeant une serif et une sans-serif, ou deux polices aux graisses ou proportions clairement différentes. La règle classique des Elements of Typographic Style de Bringhurst est d'associer des polices du même créateur (comme Source Sans + Source Serif) ou des polices ayant une hauteur x et un contraste de trait similaires. Pièges fréquents : associer deux polices qui semblent similaires mais pas identiques crée une incohérence dérangeante, tandis qu'associer des polices d'époques historiques très différentes (Garamond + Bebas) peut paraître désuni. Google Fonts publie un onglet « Pairings » pour chaque police suggérant des combinaisons testées par la communauté de design.

Comment l'API Google Fonts affecte-t-elle la vitesse de chargement ?

Chaque famille récupérée depuis `fonts.googleapis.com/css2` ajoute une requête HTTP plus le téléchargement du fichier WOFF2 (typiquement 15-40 Ko par graisse). Le navigateur ne peut pas afficher de texte dans cette police avant l'arrivée du fichier, provoquant un Flash de Texte Invisible (FOIT) ou Flash de Texte Sans Style (FOUT). Utilisez `font-display: swap` dans le CSS pour afficher immédiatement un texte de repli et basculer vers la police personnalisée une fois prête — c'est désormais le défaut de Google Fonts. Auto-héberger les polices avec des en-têtes Cache-Control appropriés peut être plus rapide que le CDN car cela évite une résolution DNS et une connexion séparées. Préchargez toujours les polices critiques avec `<link rel="preload" href="..." as="font" crossorigin>`.

Qu'est-ce que font-display et quelle valeur utiliser ?

Le descripteur CSS `font-display` (CSS Fonts Module Level 4) contrôle le rendu des polices pendant le chargement. Valeurs : `auto` (défaut navigateur, bloque souvent le rendu), `block` (3 secondes de texte invisible puis bascule), `swap` (repli immédiat puis bascule au chargement), `fallback` (100 ms invisible puis repli, bascule si la police arrive en 3 s), `optional` (100 ms invisible puis repli, pas de bascule). La documentation MDN recommande `swap` pour le texte du corps et `optional` pour les polices d'icônes non essentielles. Google Fonts utilise `swap` par défaut depuis 2019 pour améliorer les Core Web Vitals — ce changement a réduit le First Contentful Paint moyen d'environ 150 ms sur le web.

Combien de polices un site web doit-il utiliser ?

Le consensus du secteur est deux à trois polices au maximum : une pour les titres, une pour le corps de texte et éventuellement une monospace pour le code ou les données numériques. Chaque police supplémentaire augmente le poids de la page (15-100 Ko), les requêtes HTTP et la complexité visuelle. Les systèmes de design réputés sont d'accord : Material Design utilise Roboto + Roboto Mono, Apple Human Interface utilise SF Pro + SF Mono et IBM Carbon utilise IBM Plex. Les polices variables (CSS Fonts Module Level 4 `font-variation-settings`) permettent de charger un seul fichier mais d'utiliser plusieurs graisses et styles, réduisant drastiquement le poids total. Envisagez Inter, Recursive ou Source Sans 3 — toutes variables, toutes sous licence libre.

Quelles licences utilisent les Google Fonts ?

Toutes les polices de la bibliothèque Google Fonts sont sous SIL Open Font License 1.1 (OFL) ou Apache License 2.0, qui autorisent toutes deux l'usage commercial et personnel libre, la modification et l'intégration dans des logiciels. L'OFL interdit spécifiquement la vente de la police elle-même mais autorise l'inclusion dans des applications. Google Fonts met en cache les fichiers de police et le CSS sous les mêmes termes. Pour auto-héberger, téléchargez depuis fonts.google.com (téléchargement zip) et servez depuis votre propre domaine — nécessaire pour la conformité RGPD dans les juridictions de l'UE car utiliser fonts.googleapis.com transfère les IP des utilisateurs à Google.

Pourquoi le RGPD et les lois sur les cookies posent-ils problème avec Google Fonts ?

Utiliser `fonts.googleapis.com` fait que le navigateur de l'utilisateur effectue une requête HTTP vers les serveurs de Google, transmettant l'adresse IP — considérée comme donnée personnelle selon l'article 4 du RGPD. Un jugement du tribunal régional de Munich de janvier 2022 (3 O 17493/20) a estimé qu'intégrer Google Fonts sans consentement de l'utilisateur viole le RGPD, avec 100 € de dommages. L'auto-hébergement élimine totalement le risque légal. Des outils comme `google-webfonts-helper` (gwfh.mranftl.com) génèrent le CSS et téléchargent les WOFF2 pour l'auto-hébergement. Vérifiez toujours la loi sur la vie privée de votre juridiction et documentez la base légale dans votre politique de confidentialité si vous continuez à utiliser le CDN.

Puis-je utiliser des polices variables de Google Fonts ?

Oui — Google Fonts héberge plus de 200 polices variables, dont Inter, Recursive, Source Sans 3, Open Sans, Roboto Flex et Newsreader. Demandez une police variable avec la syntaxe `:[email protected]` dans l'URL : `https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap`. Le CSS utilise `font-weight: 100` à 900 (ou toute valeur intermédiaire) sans téléchargements de fichiers séparés — le fichier variable contient toutes les graisses interpolées. La prise en charge navigateur est excellente : Chrome 62+, Firefox 62+, Safari 11+. Certaines polices exposent aussi des axes de largeur (`wdth`), italique (`ital`) et taille optique (`opsz`) via `font-variation-settings`.

Quelle différence entre Google Fonts et Adobe Fonts (anciennement Typekit) ?

Google Fonts est gratuit, open source, hébergé sur le CDN de Google et inclut environ 1 500 familles. Adobe Fonts (anciennement Typekit) est inclus dans les abonnements Creative Cloud (20-60 $/mois), héberge environ 25 000 familles incluant des classiques premium (Helvetica, Futura, Garamond) et permet une synchronisation desktop via l'app Creative Cloud. Adobe Fonts a une licence plus stricte (pas d'auto-hébergement, doit inclure la balise `<script>` d'Adobe), tandis que Google Fonts autorise l'auto-hébergement complet sous OFL. Pour le design commercial nécessitant des typographies premium, Adobe gagne ; pour des polices web gratuites, libres et à chargement rapide, Google Fonts gagne. Beaucoup de sites utilisent les deux.