Guide de démarrage rapide des API de polices Web
Guide de démarrage rapide des API de polices Web
Qu’est-ce qu’une fontAPI ?
| Service de polices Web | Bibliothèque hébergée (par exemple, Google Fonts, Adobe Fonts) fournissant des balises CSS <link> ou des extraits de code JavaScript pour récupérer les fichiers de polices depuis un CDN. |
| CSS@font-face | API navigateur de bas niveau indiquant à l’agent utilisateur où télécharger un fichier de police et quel nom de famille exposer en CSS. |
| API de polices variables | Syntaxe plus récente (font-variation-settings, plages d’axes) permettant à un seul fichier d’exposer plusieurs styles (épaisseur, largeur, inclinaison, etc.). |
| Descripteur d’affichage de police | Contrôle le rendu du texte pendant le chargement de la police (auto, block, swap, fallback, optional). |
| Assistants de chargement JavaScript | Fonctions utilitaires optionnelles (constructeur FontFace, document.fonts.load()) pour le chargement dynamique ou le préchargement des polices. |
Tous ces éléments appartiennent à la famille « Font API » car ils exposent des méthodes programmatiques pour demander et utiliser des polices.
Terminologie CSS de base
| Propriété / mot-clé | Signification |
|---|---|
font-family | Nom utilisé en CSS après le chargement de la police. |
src | URL(s) du ou des fichiers de police (.woff2, .woff, .ttf, …). |
unicode-range | Sous-ensemble de caractères couverts par un fichier donné – idéal pour la sous-partition. |
font-weight / font-style / font-stretch | Descripteurs statiques classiques. |
font-variation-settings | Paires clé/valeur pour les axes de variation ('wght' 400). |
font-display | Stratégie de remplacement pour l’affichage pendant le chargement de la police. |
Utilisation du CSS@font‑face intégré (auto-hébergé)
1<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Avantages : contrôle total sur la mise en cache, les licences et les sous-ensembles ; fonctionne hors ligne si vous regroupez les fichiers.
Googlefonts CSSAPI (l’API de polices publiques la plus courante)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="stylesheet">Explication
| Partie | Fonctionnement |
|---|---|
family=Roboto:wght@400;700 | Charger uniquement les graisses normale et grasse de Roboto. |
family=Open+Sans:ital,wght@0,400;0,600;1,400 | Charger les graisses romaines régulières et semi-gras, ainsi que la graisse italique régulière d’OpenSans. |
display=swap | Utiliser un texte de remplacement jusqu’à la fin du chargement des polices (recommandé pour l’expérience utilisateur). |
Puis en CSS :
1h1 { font-family: 'Roboto', sans-serif; }
2p { font-family: 'Open Sans', sans-serif; }Conseils
- Combinez plusieurs familles en une seule requête – réduit les allers-retours HTTP.
- Utilisez des plages d’axes pour les polices variables :
family=Inter:wght@200..800.
Exemple de police variable (Googlefonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</style>Pourquoi c’est important : Un fichier remplace des dizaines de « .woff2 » statiques → une charge utile considérablement plus petite.
API de chargement de polices JavaScript (FontFace)
Quand l’utiliser : vous devez charger une police après le chargement de la page (par exemple, dans le routage d’une application monopage) ou vous souhaitez attendre qu’elle soit prête avant d’afficher l’interface utilisateur.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));Vous pouvez également demander quelles polices sont chargées :
1document.fonts.ready.then(() => console.log('All fonts ready'));AdobeFonts (Typekit) – une autre API de polices publiques
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Ensuite, référencez les familles exactement comme indiqué dans le kit :
1h2 { font-family: "adobe-caslon-pro", serif; }Principales différences par rapport aux polices Google
- Nécessite un compte Adobe et un identifiant de kit d’intégration (
xyz123). - Fournit des options de chargement sync et async (
<script>… Typekit.load(); </script>).
Meilleures pratiques en matière de performances
Sous-ensemble uniquement nécessaire aux glyphes – utilisez le paramètre
unicode-rangeoutext=de Google Fonts.Exploitez le « préchargement » pour les polices critiques :
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Définissez
font-displaysur au moinsswap.
Évitez de « bloquer » le rendu du texte, ce qui nuit au CLS (Cumulative Layout Shift).Combinez les familles en une seule requête lorsque vous utilisez GoogleFonts ou AdobeFonts.
Cache pour toujours – la plupart des CDN envoient des en-têtes « Cache-Control » dans un futur lointain pour les fichiers woff2.
Aide-mémoire de référence rapide
| API | Comment effectuer la requête | Cas d’utilisation typique |
|---|---|---|
| CSS @font-face | <style>@font-face{…}</style> + optionnel <link rel="preload"> | Polices auto-hébergées, contrôle total |
| API CSS Google Fonts | <link href="https://fonts.googleapis.com/css2?..."> | Polices gratuites avec paramètres d’URL simples |
| Adobe Fonts (Typekit) | <link href="https://use.typekit.net/xxxx.css"> | Bibliothèque payante avec intégration aux systèmes de conception |
| API JS FontFace | new FontFace(name, src[, descriptors]) | Chargement dynamique dans les SPA / bundles d’exécution |
| Plage d’axes de police variable | family=Inter:wght@200..800 ou CSS font-variation-settings | Réduisez le nombre de fichiers et activez des transitions de graisse fluides |
Exemple de code TL;DR – une seule ligne pour la plupart des projets
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Charge uniquement les graisses normales et grasses → téléchargement minimal. ✅
display=swapgarantit un affichage rapide du texte de remplacement → expérience utilisateur optimale. ✅ Fonctionne sur tous les navigateurs modernes sans JavaScript supplémentaire.
Et Aspose ?
Si vous devez manipuler ou convertir des fichiers de polices côté serveur (par exemple, générer des sous-ensembles, convertir entre TTF/WOFF2 ou extraire des métriques de glyphes), la bibliothèque Aspose.Font fournit une API de programmation pour .NET, Java et Python. Il peut être intégré dans des pipelines de construction ou des services back-end pour préparer les ressources de polices avant qu’elles ne soient servies via l’une des API de polices décrites ci-dessus.
Prêt à intégrer ?
Copiez l’un des extraits ci-dessus dans votre HTML/CSS/JS et vous obtiendrez une intégration de l’API de polices prête pour la production en quelques secondes. Bon style !