@font-face est une règle CSS qui permet d'afficher les polices de caractères dans les pages web sur l'internet. Avant l'existence de cette règle, les webmasters pouvaient utiliser sur leurs sites un ensemble limité de polices, qui sont les plus courantes et qui sont installées sur les ordinateurs des utilisateurs. Avec l'avènement de @font-face, n'importe quelle police spécifique peut facilement être attachée à un site web.
Si vous avez téléchargé la police sur notre site, vous trouverez dans l'archive des polices un code CSS prêt à l'emploi qu'il convient de copier et de placer dans le document CSS joint au projet.
Installation pas à pas
1. Sélectionnez la police souhaitée et cliquez sur "download for website".
2. A la racine de votre site, créez un dossier fonts, et copiez les polices téléchargées.
Ouvrez votre document CSS et copiez-y le contenu du fichier texte de l'archive.
4. Assurez-vous que le chemin d'accès au dossier des polices est correctement orthographié. Selon la position du dossier où se trouvent les polices, le chemin peut contenir un ou plusieurs points.
5. C'est fait. Copiez la propriété portant le nom de famille et collez-la dans le sélecteur pour lequel vous écrivez les styles.
Que faire si j'ai déjà téléchargé la police ailleurs et que je souhaite l'intégrer ?
Dans ce cas, vous devez trouver un convertisseur de polices sur internet et convertir votre police ttf (ou otf) dans les bons formats, à savoir eot, svg, woff et woff2. Cela permet de s'assurer que la police s'affiche et fonctionne correctement dans tous les navigateurs, ainsi que sur les appareils mobiles.
Vous devez alors expliciter vous-même la règle @font-face, en respectant sa syntaxe.
La syntaxe de @font-face
La syntaxe de la règle peut être grossièrement divisée en propriétés de base et propriétés avancées.
Basic :
- font-family - spécifie le nom de la police.
- src - indique le chemin d'accès à la police. Il peut s'agir de l'URL de la police située sur le serveur de votre site web, des URL des polices situées sur le serveur de quelqu'un d'autre (comme Google Fonts), ou simplement du nom de la police située sur l'ordinateur de l'utilisateur (Helvetica New Bold, Tahoma, Georgia, etc.).
Élargi :
- font-display - détermine l'apparence de la police, selon qu'elle a été téléchargée ou non et qu'elle est prête à être utilisée.
- font-stretch - permet d'ajuster la largeur du texte.
- font-style - détermine si la police est simple, italique ou inclinée (les deux dernières n'étant pas identiques).
- font-weight - Définit la saturation de la police, sur une échelle de 100 à 900 (100-small, 900-small).
- font-variant - détermine comment les lettres minuscules doivent être présentées - laissez-les intactes ou mettez-les toutes en minuscules (majuscules).
- font-feature-settings - permet de gérer des fonctions typographiques avancées dans les polices OpenType.
- font-variations-settings - permet un contrôle de bas niveau sur les variations des polices Open Type et TrueType en spécifiant des noms d'axes à quatre lettres.
- unicode-range - spécifie la gamme de codes Unicode (glyphes) à utiliser dans la police.
Connecter une police à votre site avec Google Fonts
L'utilisation de Google Fonts est la manière la plus simple d'associer une police à votre site web. Allez sur leur site, trouvez la police que vous voulez, choisissez les bonnes polices à installer et copiez le code.
Le code copié doit être placé dans le corps de la balise head, sur votre page html.
L'inconvénient de cette méthode est que si, pendant la création du site, vous n'avez plus accès à Internet, les polices ne s'afficheront pas et seront remplacées par des polices standard, car les fichiers ne se trouvent pas sur l'ordinateur local, mais sur les serveurs de Google. De plus, il y a de fortes chances que le problème se reproduise lorsque vous vous rendez chez le client pour une présentation de la mise en page (ou simplement pour confirmation) et qu'il n'a pas de Wi-Fi.
