La @font-facerègle autorise le chargement de polices personnalisées sur une page Web. Une fois ajoutée à une feuille de style, la règle demande au navigateur de télécharger la police à partir de l'endroit où elle est hébergée, puis de l'afficher comme spécifié dans le CSS.
Sans la règle, nos conceptions sont limitées aux polices déjà chargées sur l'ordinateur d'un utilisateur, qui varient en fonction du système utilisé. Voici une belle ventilation des polices système existantes.
Support de navigateur le plus profond possible
C'est la méthode avec le soutien le plus profond possible à l'heure actuelle. La @font-facerègle doit être ajoutée à la feuille de style avant tout style.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Ensuite, utilisez-le pour styliser des éléments comme celui-ci:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Niveau pratique de prise en charge du navigateur
Les choses évoluent fortement vers WOFF et WOFF 2, nous pouvons donc probablement nous en sortir avec:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Prise en charge du navigateur légèrement plus approfondie
Si vous avez besoin d'une sorte de juste milieu entre un support complet et un support pratique, cela couvrira quelques bases supplémentaires:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Prise en charge du navigateur super progressif
Si nous jalonnons la ferme sur WOFF, nous pouvons nous attendre à ce que les choses évoluent vers WOFF2 à un moment donné. Cela signifie que nous pouvons vivre à la pointe de la technologie avec:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Non | 35+ avec drapeau | 23+ | Non | 37 | Non |
Techniques alternatives
@import
Bien que ce @font-facesoit excellent pour les polices hébergées sur nos propres serveurs, il peut y avoir des situations où une solution de police hébergée est meilleure. Google Fonts propose cela comme un moyen d'utiliser leurs polices. Voici un exemple d'utilisation @importpour charger la police Open Sans à partir de Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Ensuite, nous pouvons l'utiliser pour styliser des éléments:
body ( font-family: 'Open Sans', sans-serif; )Si vous ouvrez l'URL de la police, vous pouvez en fait voir tout le @font-facetravail effectué dans les coulisses.
Un avantage de l'utilisation d'un service hébergé est qu'il est susceptible d'inclure toutes les variations de fichiers de polices, ce qui garantit une compatibilité approfondie entre les navigateurs sans avoir à héberger tous ces fichiers nous-mêmes.
Voir le Pen utilisant @import pour les polices personnalisées par CSS-Tricks (@ css-tricks) sur CodePen.
une feuille de style
De même, vous pouvez créer un lien vers le même élément que vous le feriez pour tout autre fichier CSS, dans le document HTML plutôt que dans le CSS. En utilisant le même exemple de Google Fonts, voici ce que nous utiliserions:
Ensuite, nous pouvons styliser nos éléments comme les autres méthodes:
body ( font-family: 'Open Sans', sans-serif; )Encore une fois, il s'agit d'importer les @font-facerègles mais, au lieu de les injecter dans notre feuille de style, elles sont ajoutées à notre HTML à la place.
Voir le Pen Using pour les polices personnalisées par CSS-Tricks (@ css-tricks) sur CodePen.
C'est à peu près la même chose… les deux techniques téléchargent les ressources nécessaires.
Comprendre les types de fichiers de polices
L'extrait original en haut de cet article fait référence à de nombreux fichiers avec des extensions étranges. Passons en revue chacun d'eux et comprenons mieux ce qu'ils signifient.
WOFF / WOFF2
Signifie: Web Open Font Format.
Créées pour une utilisation sur le Web et développées par Mozilla en collaboration avec d'autres organisations, les polices WOFF se chargent souvent plus rapidement que les autres formats car elles utilisent une version compressée de la structure utilisée par les polices OpenType (OTF) et TrueType (TTF). Ce format peut également inclure des métadonnées et des informations de licence dans le fichier de police. Ce format semble être le gagnant et vers lequel tous les navigateurs se dirigent.
WOFF2 est la prochaine génération de WOFF et offre une meilleure compression que l'original.
SVG / SVGZ
Signifie: Graphiques vectoriels évolutifs (police)
SVG est une recréation vectorielle de la police, ce qui la rend beaucoup plus légère en taille de fichier et la rend également idéale pour une utilisation mobile. Ce format est le seul autorisé par la version 4.1 et inférieure de Safari pour iOS. Les polices SVG ne sont actuellement pas prises en charge par Firefox, IE ou IE Mobile. Firefox a reporté la mise en œuvre indéfiniment pour se concentrer sur WOFF.
SVGZ est la version zippée de SVG.
EOT
Signifie: Embedded Open Type.
Ce format a été créé par Microsoft (les innovateurs originaux de @font-face) et est un standard de fichier propriétaire pris en charge uniquement par IE. En fait, c'est le seul format que IE8 et les versions antérieures reconnaissent lors de l'utilisation @font-face.
OTF / TTF
Signifie: police OpenType et police TrueType.
Le format WOFF a été initialement créé en réaction à OTF et TTF, en partie parce que ces formats pouvaient facilement (et illégalement) être copiés.Cependant, OpenType a des capacités qui pourraient intéresser de nombreux concepteurs (ligatures et autres).
Une note sur les performances
Les polices Web sont idéales pour la conception, mais il est également important de comprendre leur impact sur les performances Web. Les polices personnalisées entraînent souvent une baisse des performances des sites car la police doit être téléchargée avant d'être affichée.
Un symptôme courant était un bref moment où les polices se chargent d'abord comme solution de secours, puis clignotent sur la police téléchargée. Paul Irish a un post plus ancien à ce sujet (intitulé «FOUT»: Flash Of Unstyled Text).
De nos jours, les navigateurs cachent généralement le texte avant le chargement de la police personnalisée par défaut. Mieux ou pire? Tu décides. Vous pouvez exercer un certain contrôle sur cela grâce à diverses techniques. Un peu hors de portée pour cet article, mais voici un trio d'articles de Zach Leatherman pour vous aider à vous lancer dans le terrier du lapin:
- Better @ font-face avec les événements de chargement de police
- Comment nous utilisons les polices Web de manière responsable, ou en évitant un @ font-face-palm
- Flash of Faux Text-encore plus sur le chargement des polices
Voici quelques considérations supplémentaires lors de l'implémentation de polices personnalisées:
Surveillez la taille du fichier
Les polices peuvent être étonnamment lourdes, alors penchez-vous vers des options offrant des versions plus légères. Par exemple, privilégiez un jeu de polices de 50 Ko par rapport à un jeu de 400 Ko.
Limitez le jeu de caractères, si possible
Avez-vous vraiment besoin des poids gras et noirs pour une police? Limiter vos jeux de polices pour charger uniquement ce qui est utilisé est une bonne idée et vous trouverez ici quelques bons conseils à ce sujet.
Pensez aux polices système pour les petits écrans
De nombreux appareils sont bloqués sur des connexions de merde. Une astuce peut être de cibler des écrans plus grands lors du chargement de la police personnalisée à l'aide de @media.
Dans cet exemple, les écrans inférieurs à 1000 pixels recevront une police système à la place et les écrans larges et supérieurs recevront la police personnalisée.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Services de polices
Il existe un certain nombre de services qui hébergeront des polices et donneront également accès à des polices sous licence commerciale. Les avantages de l'utilisation d'un service se résument souvent à la livraison efficace d'un grand choix de polices légales (par exemple, les servir sur un CDN rapide).
Voici quelques services de polices hébergés:
- Typographie de nuage
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typothèque
- Fonts.com
- Polices Google
- Écureuil de police
Qu'en est-il des polices d'icônes?
C'est vrai, @ font-face peut charger un fichier de police plein d'icônes pouvant être utilisé pour un système d'icônes. Cependant, je pense que vous feriez bien mieux d'utiliser SVG comme système d'icônes. Voici une comparaison des deux méthodes.
Plus de ressources
- Principes de base de l'API Google Font
- Familles de polices CSS