Ajouter des polices personnalisées avec Google Fonts
Découvrez la technique pour personnaliser vos polices de caractères. Avec Google Fonts, utilisez rapidement des polices de caractères originales et compatibles avec la majorité des navigateurs des ordinateurs, smartphones et tablettes.
Dans ce nouvel article, vous allez apprendre à utiliser vos polices de texte personnalisées directement avec CSS 3 pour les intégrer dans vos sites Internet.
Rappelez-vous dans un article précédent, vous avez appris à choisir des polices de caractères, mais uniquement parmi les polices système, donc les polices présentes sur l’ordinateur de votre internaute.
Cette fois, vous allez intégrer des polices qui ne sont pas présentes sur l’ordinateur de l’internaute. Le navigateur va les télécharger, grâce à CSS. Et vous pourrez utiliser des polices complètement originales sur votre site Internet en étant sûr que vos internautes puissent les afficher.
Les polices personnalisées
L’importation et l’utilisation de police partagée se fait grâce à la propriété font-face. Vous devez d’abord signifier au navigateur de l’internaute de télécharger la police pour ensuite l’utiliser dans la page.
Utilisez @font-face {font-family: "le nom de votre police"} et ensuite, vous précisez l’URL.
Exemple :
@font-face {
font-family: 'Revalia';
src: url(http://fonts.googleapis.com/css?family=Revalia);
}
.maPolice {
font-family: 'Revalia';
}Google fonts propose des tonnes et des tonnes de polices personnalisées toutes plus ou moins sympas. Vous pouvez les utiliser sans problème sur vos sites Interne. Vous avez le choix sur Google fonts, profitez-en !
Il existe plusieurs types de format de polices, les Web fonts.
Vous avez le format eot (Embedded Open Type), c’est une forme compacte de la police open type, un format propriétaire de Microsoft.
Vous avez le format ttf (True Type Font) qui est le format de police de caractères le plus répandu sur le Web aujourd’hui.
Vous avez le format otf (Open Type Font) qui est une évolution du format ttf avec des possibilités typographiques améliorées. Ce format otf est de plus en plus présents sur les sites Internet.
Vous avez un format très récent, c’est le format woff (Web Open Font Format). C’est un format de polices de caractères compressés pour le Web. Un format très intéressant et très optimisé, à utiliser pour vos sites Internet. C’est le format que nous vous conseillons.
Tous les navigateurs ne prennent pas tous en compte le même format de police.
Vous avez donc la possibilité de charger des polices de caractères sous plusieurs formats dans votre feuille de style. Utilisez l’attribut SRC pour spécifier des URL de votre police de caractère au format eot, woff, ttf… Vous aurez plus de chance que votre police de caractères s’affiche correctement chez votre visiteur.
Nous vous conseillons d’utiliser le site Internet fontsquirrel pour générer une police dans plusieurs formats :
http://www.fontsquirrel.com/tools/webfont-generator
Si vous avez une police de caractères dans un seul format, vous allez sur ce site, vous donnez votre fichier de police et vous pourrez le récupérer dans plusieurs formats. Ainsi votre police personnalisée s’affiche correctement quel que soit le navigateur de votre internaute, c’est très important.
Google fonts API vous simplifie encore plus la vie !
Vous vous rendez sur Google fonts API. Et vous pouvez utiliser des polices personnalisées sur vos pages Web. Vous n’avez pas à vous préoccuper de @FontText, ni du style CSS. Vos polices seront parfaitement compatibles avec la majorité des navigateurs.
Google fournit beaucoup d’outils prêts à l’emploi pour les webmasters.
Une fois de plus, je vous conseille d’utiliser Google fonts API pour utiliser les polices adaptées qu’il vous fourni. Elles sont adaptées aux navigateurs et elles ont un poids minimal.
Il vous suffit d’aller sur leur site, de récupérer un code à ajouter directement dans votre page HTML pour obtenir la police.
Le code ressemble à ça :
<head>
<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
<style>
.bloc1 { font-family: 'Revalia', Arial; }
</style>
</head>Ainsi, l’utilisateur n’a pas besoin d’avoir la police sur son ordinateur pour afficher correctement votre texte :
Afficher des lettres creuses
Vous avez d’autres propriétés CSS pour créer des effets sur le texte. Les lettres creuses avec webkit-text-stroke, permet d’afficher vos textes sous forme de lettres creuses.
Vous définissez l’épaisseur du bord des lettres avec width, la couleur avec color, stroke c’est un raccourci des deux valeurs précédentes. Vous pouvez définir aussi text-fill-color, la couleur de remplissage des lettres, ou les laisser en transparent.
Exemples :
.creux { -webkit-text-stroke: 2px red; }
.couleurCreux { -webkit-text-fill-color: #FFFFFF; }Conclusion
Dans un précédent article, vous avez vu comment utiliser d’autres polices de caractères que celle par défaut. Mais ces polices devaient se trouver sur l’ordinateur de l’utilisateur, ce dont vous ne pouvez être sûr.
Ici, vous avez vu comment l’être : en téléchargeant la police au chargement de votre page.
Attention toutefois quand vous utilisez des polices de caractères personnalisées ou originales grâce à CSS 3. C’est l’internaute qui va télécharger cette police de caractères sur son PC.
N’en abusez pas trop !
Mettez une, deux, voire trois polices de caractères personnalisées maximum dans votre site Internet.
Choisissez une police de caractères originales sur Google Fonts : http://www.google.com/fonts/.
Utilisez Google Fonts API :https://developers.google.com/fonts/docs/getting_started?hl=fr
Utilisez FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator) pour créer des fichiers de polices de caractères compatibles avec les différents navigateurs.
Voila, vous pouvez maintenant briller en soirée …
Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours
Ici le parcours complet pour devenir développeur web : https://www.develop4fun.fr/parcours-developpeur-web-cours-en-ligne/
Vous pouvez également nous retrouver sur Youtube :
Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q
Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA
