Un guide complet sur l'utilisation de @font-face en CSS pour le chargement de polices personnalisées, incluant des techniques d'optimisation pour améliorer la performance du site web et l'expérience utilisateur auprès d'un public mondial diversifié.
CSS Font Face : Stratégies de chargement et d'optimisation des polices personnalisées pour le design web mondial
La typographie joue un rôle essentiel dans la conception de sites web, façonnant l'expérience utilisateur et transmettant l'identité de votre marque. La règle @font-face en CSS permet aux développeurs d'intégrer des polices personnalisées directement dans leurs sites web, offrant un plus grand contrôle sur la présentation visuelle du texte et permettant une expérience utilisateur plus unique et engageante. Cependant, une mise en œuvre incorrecte peut entraîner des problèmes de performance, affectant les temps de chargement du site web et nuisant à la satisfaction des utilisateurs, en particulier pour ceux des régions disposant de connexions Internet plus lentes.
Ce guide complet explore les subtilités de @font-face, couvrant les meilleures pratiques pour le chargement de polices personnalisées et les stratégies d'optimisation afin d'assurer une expérience fluide et performante pour un public mondial. Nous aborderons les différents formats de police, les techniques d'optimisation et les fonctionnalités avancées pour vous aider à maîtriser l'art de la typographie web.
Comprendre la règle @font-face
La règle @font-face est une puissante règle CSS qui vous permet de spécifier des fichiers de polices personnalisées à télécharger et à utiliser sur votre site web. Elle comble essentiellement le fossé entre l'ensemble limité de polices système et le vaste monde de la typographie personnalisée.
Voici la syntaxe de base :
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
DĂ©cortiquons les composants :
font-family: Cette propriété définit le nom que vous utiliserez pour référencer la police personnalisée dans vos règles CSS. Choisissez un nom descriptif et unique.src: Cette propriété spécifie l'emplacement des fichiers de police. Vous pouvez fournir plusieurs sources, permettant au navigateur de choisir le format optimal en fonction de ses capacités. La fonctionformat()indique le format de police de chaque fichier.font-weight: Cette propriété définit le poids (graisse) de la police. Les valeurs courantes incluentnormal,bold,lighter,bolder, et des valeurs numériques comme100,400,700, etc.font-style: Cette propriété définit le style de la police (par exemple,normal,italic,oblique).
Une fois définie, vous pouvez utiliser la police personnalisée dans vos règles CSS comme ceci :
body {
font-family: 'MyCustomFont', sans-serif;
}
Cela appliquera la police 'MyCustomFont' à l'ensemble du corps de votre site web. Le sans-serif est une police de repli qui sera utilisée si la police personnalisée ne parvient pas à se charger.
Choisir les bons formats de police : une perspective mondiale
Différents navigateurs prennent en charge différents formats de police. Pour assurer une large compatibilité, il est crucial de fournir vos polices dans plusieurs formats. Voici une description des formats de police courants et de leur prise en charge par les navigateurs :
- WOFF2 (Web Open Font Format 2) : Le format le plus moderne et le plus recommandé, offrant une compression et des performances supérieures. Pris en charge par tous les navigateurs modernes.
- WOFF (Web Open Font Format) : Un format largement pris en charge offrant une bonne compression. Toujours pertinent pour les navigateurs plus anciens.
- EOT (Embedded Open Type) : Spécifiquement conçu pour Internet Explorer. Généralement plus nécessaire, sauf si vous devez absolument prendre en charge de très anciennes versions d'IE.
- TTF (TrueType Font) / OTF (OpenType Font) : Des formats plus anciens qui sont généralement plus volumineux et moins optimisés pour une utilisation sur le web. Évitez de les utiliser directement lorsque c'est possible.
- Polices SVG : Un format plus ancien, peu utilisé aujourd'hui en raison de la prise en charge par les navigateurs et d'autres limitations.
Recommandation : Utilisez WOFF2 comme format principal, et fournissez WOFF comme solution de repli pour les navigateurs plus anciens. N'envisagez EOT que si vous devez prendre en charge de très anciennes versions d'Internet Explorer.
Voici un exemple de fourniture de plusieurs formats de police dans votre règle @font-face :
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* Pour les anciens IE */
font-weight: normal;
font-style: normal;
}
Stratégies de chargement des polices : optimiser pour la vitesse et l'expérience utilisateur
La manière dont vous chargez vos polices peut avoir un impact significatif sur les performances de votre site web. Voici plusieurs stratégies de chargement de polices que vous pouvez employer :
1. Chargement de base des polices (Comportement par défaut)
Par défaut, les navigateurs bloquent généralement le rendu du texte jusqu'à ce que la police soit téléchargée. Cela peut entraîner une perception de goulot d'étranglement des performances, où les utilisateurs voient un écran blanc ou du texte invisible pendant une brève période (souvent appelé un "flash de texte invisible" ou FOIT).
Bien que simple à mettre en œuvre, cette approche n'est généralement pas recommandée pour une expérience utilisateur optimale.
2. Utiliser la propriété font-display
La propriété font-display offre plus de contrôle sur la manière dont les polices sont chargées et affichées. Elle vous permet de personnaliser le comportement pendant le processus de chargement de la police, offrant une expérience plus fluide à vos utilisateurs. C'est l'approche recommandée dans la plupart des situations.
Voici les valeurs possibles pour font-display :
auto: Le navigateur utilise sa stratégie de chargement de police par défaut (généralement FOIT).block: Donne à la police une courte période de blocage et une période d'échange infinie. Le navigateur cache initialement le texte, puis l'affiche lorsque la police est chargée. Si la police n'est pas chargée dans un court laps de temps (généralement 3 secondes), la police de repli est affichée.swap: Donne à la police une période de blocage nulle et une période d'échange infinie. Le navigateur affiche immédiatement le texte en utilisant une police de repli. Une fois la police personnalisée chargée, le texte est remplacé par la police personnalisée. Cela évite le FOIT mais peut entraîner un "flash de texte sans style" (FOUT).fallback: Donne à la police une très courte période de blocage et une courte période d'échange. C'est un compromis entreblocketswap. Le navigateur cache le texte pendant une très courte période, puis passe à la police de repli si la police personnalisée n'est pas chargée. Il continue d'échanger les polices pendant une courte période, après quoi il s'arrête et utilise simplement la police de repli.optional: Donne à la police une période de blocage extrêmement courte et aucune période d'échange. Utile pour les polices qui ne sont pas critiques pour le rendu initial de la page (par exemple, les polices utilisées dans les éléments d'interface utilisateur non essentiels).
Recommandations :
- Pour la plupart des scénarios,
swapoffre le meilleur équilibre entre la performance perçue et la stabilité visuelle. Les utilisateurs voient le texte immédiatement, même s'il est initialement stylisé avec une police de repli. - Utilisez
fallbacksi vous souhaitez minimiser le FOUT tout en donnant la priorité à la police personnalisée. - Utilisez
optionalpour les polices non critiques afin d'Ă©viter de bloquer inutilement le rendu de la page.
Exemple d'utilisation de font-display: swap :
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Préchargement des polices
Le préchargement des polices peut améliorer les performances en indiquant au navigateur de télécharger les fichiers de police le plus tôt possible. Cela peut réduire le délai associé au chargement des polices, ce qui se traduit par un temps de chargement perçu plus rapide.
Utilisez la balise <link rel="preload"> dans le <head> de votre document HTML pour précharger les polices :
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Explication :
rel="preload": Spécifie que la ressource doit être préchargée.href: Spécifie l'URL du fichier de police.as="font": Spécifie le type de ressource préchargée (dans ce cas, une police).type="font/woff2": Spécifie le type MIME du fichier de police.crossorigin: Requis si la police est chargée depuis une origine différente (par exemple, un CDN).
Attention : Le préchargement de trop de ressources peut avoir un impact négatif sur les performances. Ne préchargez que les polices qui sont critiques pour le rendu initial de la page.
4. API de chargement des polices (Avancé)
L'API de chargement des polices (Font Loading API) offre un niveau de contrôle plus granulaire sur le chargement des polices. Elle vous permet de détecter quand une police a été chargée, de suivre la progression du chargement et de gérer les erreurs. Cela peut être utile pour mettre en œuvre des stratégies de chargement de polices plus sophistiquées.
Exemple (JavaScript) :
document.fonts.load('1em MyCustomFont').then(function() {
// La police a été chargée avec succès
console.log('MyCustomFont loaded!');
});
L'API de chargement des polices est plus complexe à utiliser que la propriété font-display, mais elle offre une plus grande flexibilité pour les cas d'utilisation avancés.
Optimisation des fichiers de police : réduire la taille et améliorer les performances
L'optimisation de vos fichiers de police est cruciale pour améliorer les performances du site web et réduire les temps de chargement. Voici plusieurs techniques que vous pouvez utiliser :
1. Création de sous-ensembles de polices (Font Subsetting)
La plupart des polices contiennent un grand nombre de glyphes (caractères), dont beaucoup peuvent ne pas être utilisés sur votre site web. La création de sous-ensembles de polices consiste à supprimer les glyphes inutilisés du fichier de police, ce qui réduit considérablement sa taille. C'est particulièrement important lors de la prise en charge de plusieurs langues, car les polices peuvent contenir des glyphes pour des caractères non utilisés dans une région particulière.
Avantages :
- Taille de fichier de police plus petite
- Temps de téléchargement plus rapides
- Performances du site web améliorées
Outils pour la création de sous-ensembles de polices :
- FontForge (Open Source) : Un puissant éditeur de polices de bureau qui vous permet de créer manuellement des sous-ensembles de polices.
- Glyphhanger (Ligne de commande) : Un outil en ligne de commande qui identifie les glyphes inutilisés et crée des sous-ensembles.
- Outils de création de sous-ensembles de polices en ligne : Plusieurs outils en ligne sont disponibles pour créer des sous-ensembles de polices, comme le Webfont Generator de Font Squirrel.
Unicode-range
Pour les sites multilingues, le descripteur CSS unicode-range peut être utilisé pour spécifier les plages de caractères Unicode pour lesquelles la police doit être utilisée. Cela permet au navigateur de ne télécharger que les parties nécessaires de la police, améliorant ainsi les performances. C'est particulièrement utile pour les langues avec de grands jeux de caractères comme le chinois, le japonais et le coréen (CJK).
Exemple :
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Idéogrammes unifiés CJK courants */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Compression
Assurez-vous que vos fichiers de police sont correctement compressés en utilisant Gzip ou Brotli. La plupart des serveurs web prennent en charge ces algorithmes de compression, qui peuvent réduire considérablement la taille des fichiers de police pendant la transmission.
Avantages :
- Taille de fichier plus petite pendant la transmission
- Temps de téléchargement plus rapides
3. Optimisation des polices SVG
Si vous utilisez des polices SVG (bien que généralement non recommandé), optimisez les fichiers SVG à l'aide d'outils comme SVGO (SVG Optimizer) pour supprimer les métadonnées inutiles et réduire la taille du fichier.
4. Polices variables
Les polices variables sont une technologie de police relativement nouvelle qui permet à un seul fichier de police de contenir plusieurs variations d'une police de caractères, telles que différents poids, largeurs et styles. Cela peut réduire considérablement la taille globale du fichier par rapport à l'utilisation de fichiers de police distincts pour chaque variation.
Avantages :
- Tailles de fichiers plus petites par rapport aux formats de police traditionnels lors de l'utilisation de plusieurs variations
- Plus grande flexibilité de conception
5. Mise en cache
Configurez votre serveur web pour mettre correctement en cache les fichiers de police. Cela permet aux navigateurs de stocker les fichiers de police localement, réduisant ainsi la nécessité de les télécharger à plusieurs reprises lors des visites ultérieures.
Avantages :
- Temps de chargement plus rapides pour les visiteurs récurrents
- Charge du serveur réduite
Considérations sur l'accessibilité
Lorsque vous utilisez des polices personnalisées, il est essentiel de tenir compte de l'accessibilité pour vous assurer que votre site web est utilisable par tous, y compris les personnes handicapées.
1. Contraste suffisant
Assurez-vous que la couleur du texte offre un contraste suffisant par rapport à la couleur de fond pour répondre aux normes WCAG (Web Content Accessibility Guidelines). Utilisez un outil de vérification du contraste pour vous assurer que le rapport de contraste est adéquat.
2. Taille de police lisible
Utilisez une taille de police suffisamment grande pour être facilement lisible, en particulier pour les utilisateurs ayant une déficience visuelle. Évitez d'utiliser des tailles de police excessivement petites.
3. Poids de la police
Choisissez un poids de police qui est facilement lisible. Évitez d'utiliser des polices excessivement fines ou légères, car elles peuvent être difficiles à lire pour certains utilisateurs.
4. Polices de repli
Fournissez des polices de repli appropriées dans vos règles CSS pour vous assurer que le texte reste lisible même si la police personnalisée ne se charge pas. Choisissez des polices de repli qui sont similaires en style et en apparence à la police personnalisée.
5. Redimensionnement du texte
Assurez-vous que les utilisateurs peuvent facilement redimensionner le texte sur votre site web en utilisant le zoom du navigateur ou d'autres outils d'accessibilité. Évitez d'utiliser des unités de taille fixe (par exemple, les pixels) pour les tailles de police. Utilisez plutôt des unités relatives (par exemple, em, rem).
6. Attributs de langue
DĂ©finissez correctement l'attribut lang sur la balise <html> pour indiquer la langue de la page. Cela aide les lecteurs d'Ă©cran et autres technologies d'assistance Ă rendre correctement le texte.
Exemple :
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>This is some text in English.</p>
</body>
</html>
Compatibilité multi-navigateurs
Assurez-vous que vos polices personnalisées sont compatibles avec un large éventail de navigateurs. Testez votre site web sur différents navigateurs et appareils pour identifier tout problème de compatibilité. Utilisez des outils comme BrowserStack ou Sauce Labs pour tester votre site web sur une variété de navigateurs et de systèmes d'exploitation.
Envisagez d'utiliser une feuille de style de réinitialisation CSS (par exemple, Normalize.css) pour normaliser les styles par défaut entre les différents navigateurs.
Pièges courants à éviter
- Utiliser trop de polices personnalisées : L'utilisation de trop de polices personnalisées peut avoir un impact négatif sur les performances et créer une expérience visuelle désordonnée. Limitez le nombre de polices personnalisées utilisées sur votre site web à un maximum de deux ou trois.
- Utiliser des fichiers de police volumineux : Les fichiers de police volumineux peuvent augmenter considérablement les temps de chargement. Optimisez vos fichiers de police en utilisant les techniques décrites ci-dessus.
- Ne pas fournir de polices de repli : Ne pas fournir de polices de repli peut entraîner un texte invisible si la police personnalisée ne se charge pas.
- Ignorer les considérations d'accessibilité : Ignorer les considérations d'accessibilité peut rendre votre site web inutilisable pour les personnes handicapées.
- Ne pas tester sur différents navigateurs : Ne pas tester sur différents navigateurs peut entraîner des problèmes de compatibilité.
- Lier directement des fichiers de police depuis le site du concepteur ou d'autres sources non fiables : Hébergez uniquement les polices depuis votre propre site web, CDN ou un service de polices réputé.
Meilleures pratiques pour la typographie web mondiale
Lors de la conception de sites web pour un public mondial, il est important de tenir compte des meilleures pratiques suivantes pour la typographie web :
- Choisissez des polices qui prennent en charge plusieurs langues : SĂ©lectionnez des polices qui incluent des glyphes pour les langues que vous avez l'intention de prendre en charge sur votre site web.
- Utilisez des tailles de police appropriées pour différentes langues : Les tailles de police qui conviennent à une langue peuvent ne pas convenir à une autre. Ajustez les tailles de police si nécessaire pour assurer la lisibilité dans différentes langues.
- Tenez compte de la hauteur de ligne et de l'espacement des lettres : La hauteur de ligne et l'espacement des lettres peuvent affecter la lisibilité, en particulier pour les langues avec des jeux de caractères complexes. Ajustez ces valeurs si nécessaire pour optimiser la lisibilité.
- Utilisez un alignement de texte approprié : L'alignement de texte approprié peut varier en fonction de la langue. Par exemple, les langues de gauche à droite utilisent généralement un alignement à gauche, tandis que les langues de droite à gauche utilisent généralement un alignement à droite.
- Testez votre site web avec différentes langues : Testez votre site web avec différentes langues pour vous assurer que la typographie est correcte et facilement lisible.
Exemple : Utilisation d'une police avec prise en charge de caractères mondiaux
Envisagez d'utiliser une police comme Noto Sans, qui est conçue pour prendre en charge un large éventail de langues et d'écritures. Google propose Noto Sans et ses nombreuses variantes (Noto Sans CJK, Noto Sans Arabic, etc.) comme police web gratuite.
Conclusion
Maîtriser le CSS @font-face et mettre en œuvre des stratégies efficaces de chargement et d'optimisation des polices sont cruciaux pour créer des sites web performants et visuellement attrayants pour un public mondial. En comprenant les nuances des formats de police, des techniques de chargement et des méthodes d'optimisation, vous pouvez offrir une expérience utilisateur fluide et engageante qui transcende les frontières géographiques et les différences culturelles.
En suivant les meilleures pratiques décrites dans ce guide, vous pouvez vous assurer que la typographie de votre site web améliore sa conception globale, ses performances et offre une expérience accessible à tous les utilisateurs, quel que soit leur emplacement ou leur appareil.