Capture d’écran présentant le logo et un extrait du site Google Web Fonts
Ce blog se met en place doucement et la nouveauté du jour est la modification de la police de caractères : Responsive Mind se pare désormais de la police sous Open Font License (OFL) « Nunito » gracieusement fournie par Google dans le cadre du projet Web Fonts. J’en profite donc pour partager mon expérience avec ce petit tutoriel qui vous guidera dans la mise en place d’une police personnalisée
La mise en place d’une telle police est d’une simplicité à toute épreuve et s’effectue en 3 étapes qui vous prendront moins de 15 minutes :
- Sélection de la police désirée
- Appel de la police dans les headers de votre site ou blog
- Application de la police dans votre feuille de style
Sélection de la police désirée
En vous connectant à http://www.google.com/webfonts vous avez accès à une collection très riche de polices de caractères utilisables gratuitement sur votre site (mais aussi téléchargeable pour que vous puissiez vous en servir dans un éditeur de texte). Comme vous pouvez le voir sur la capture en haut de ce billet, 616 fonts sont disponibles à ce jour.
Une fois votre choix fait, sélectionnez toutes les polices voulues en cliquant sur le bouton « Add to collection » correspondant à chacune d’entre elles si vous voulez en utiliser plusieurs ou sur le lien « Quick-use » d’une police pour n’en utiliser qu’une.
Les actions possibles sur la web font Nunito
Attention : chaque police utilisée augmente le temps de chargement de vos pages, il est préférable de n’en utiliser qu’une pour tout votre site (et puis un peu de cohérence graphique ne peut pas nuire).
En cliquant sur « Quick-use » vous obtiendrez 2 lignes de code : une à ajouter dans votre code HTML, l’autre à ajouter dans votre css.
Mise en place de la police dans les headers de vos pages
Google fournit une ligne de code à insérer dans les headers de vos pages
Pour intégrer la police à votre site, il faut simplement copier la ligne de code fournie et la coller entre les balises <head> et </head> de vos pages, que vous utilisiez WordPress ou pas. Idéalement, il faut insérer cette ligne après la balise <title></title> dont la position a une importance dans le référencement de vos pages.
Utilisateurs de WordPress, vous devez éditer le fichier En-tête (headers.php) de votre thème, soit avec un outil de développement, soit simplement dans le backoffice de WordPress, section Apparence → Editeur.
Mise en place de la police dans votre feuille de style css
Il suffit d’indiquer le nom de la police dans votre feuille de style
Une fois la police « appelée » par vos pages, il faut indiquer au navigateur qu’il doit l’utiliser. Pour cela il suffit d’ajouter à votre feuille de style le nom de la font dont vous voulez vous servir. La plupart du temps le fait de paramétrer l’élément html est suffisant pour que la police soit appliquée à tous les éléments, par exemple de la façon suivante :
html { font-family: 'Nunito', Tahoma; }
Avec WordPress, il faut maintenant éditer la feuille de style (style.css) de votre thème, de la même façon que précédemment, pour mettre en place le code ci-dessus.
D’autres services fournissant des web fonts
Google n’est pas le seul acteur à fournir des polices utilisables sur vos sites internet. Il y a par exemple l’excellent FontSquirrel qui propose de la même façon plus de 800 polices à télécharger et intégrer gratuitement, même pour un usage commercial, mais qui offre surtout la possibilité de transformer vos propres fichiers ttf en web font, grâce à un outil appelé @font-face Generator.
L’intégration est à peine plus complexe que pour les google fonts mais comme les fichiers sont hébergés par vous, il n’y a plus aucun risque de voir disparaître le service du jour au lendemain.
Et vous ? Connaissez-vous d’autres collections de web fonts ? Utilisez-vous un générateur de web fonts ou le service de Google ?
Si vous avez aimé cet article, vous aimerez peut-être
Sources :
Google Web Fonts: http://www.google.com/webfonts
Font Squirrel: http://www.fontsquirrel.com/
7 réponses
C’est pas possible d’héberger des polices google sur son serveur ?
Bonjour, personnellement j’utilise les web fonts de google « en ligne » mais j’ai téléchargé les fichiers ttf que j’ai convertis avec FontSquirrel au cas où… comme ça je pourrai les héberger moi-même
[…] alors il faut s’assurer que le texte qu’on lui propose est lisible : choisissez une police de caractères claire (évitez généralement les fonts manuscrites) et assurez vous que le contraste entre le […]
Les google font permettent des effets type shadow, neon, embossed, etc.
Comment appeler ces effets dans la feuille css ?
Bonjour, tu remarqueras que les différentes variantes de la police sont accompagnées d’un numéro : normal 400, thin 100… pour utiliser ces variantes, spécifie ce numéro comme valeur de la propriété font-weight en css.
Voilà l’exemple fourni par google : h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
Merci beaucoup
je debute sur WP et je viens de reussir a installer ma premiere Font grace a votre tuto tres simple et clair
MERCI beaucoup
Cdt
@Jerome il n’y a pas de quoi, ce blog est là pour ça !