27 juillet 2011 • 3 commentaires

WordPress : utiliser des webfonts Google

Lors de la modification du thème d’un blog WordPress, une solution pour une personnalisation des polices est d’utiliser les webfonts Google.
C’est la solution que j’ai choisi lors de la « création » du blog de ma soeur :
http://www.nathalie-rouanet-herlt.com

J’ai choisi, au départ, le nouveau thème Twenty Eleven (version sombre),
fourni avec WordPress 3.2,
et j’ai commencé à modifier le CSS et les bannières aléatoires de base.
Mais les polices de bases ne convenaient pas : trop petites et trop carrées.
De plus, ma soeur voulait afficher une citation aléatoire sur la page d’accueil
en écriture manuscrite.

Au départ, je pensais utiliser des images mais pour ajouter dans les menus,
cela se compliquait.

Je me suis souvenu de la possibilité des webfonts de Google que je pensais compliquée à mettre en oeuvre…
mais je me suis aperçu, qu’en fait, c’est relativement simple car Google nous guide pas à pas pour l’intégration sur un site.
Bien sûr, ce n’est pas réservé à un blog WordPress, on peut utiliser les webfonts sur tout type de site.

Pour l’extension qui gère l’affichage aléatoire des citations, j’ai choisi Random Text
que l’on peut utiliser avec un widget à afficher dans la sidebar
ou en insérant du code PHP à l’endroit voulu :
<?php randomtext('Citations'); ?>
On peut ensuite, par les réglages ajouter autant de citations que l’on veut,
elles s’afficheront ensuite de manière aléatoire.

Ensuite, j’ai recherché la page Google web fonts

puis j’ai choisi les polices que j’allais utiliser :
– en utilisant les filtres :

Filtres

– en affichant par mot, citation ou paragraphe :

affichage mot (word)

Affichage citation (Sentence)

Affichage paragraphe (Paragraph)

Pour chaque police :
– un clic sur ouvre une fenêtre d’aperçu complet de la police

– un clic sur permet d’accéder aux paramètres à utiliser

choix du style

choix du type de caractères

Il suffit ensuite de récupérer le code à insérer dans le <head> de votre site
ou dans le fichier header.php de votre blog WordPress
(entre les balises <head> et </head>) :

code header

Alternatives :
– import :
@import url(http://fonts.googleapis.com/css?family=Open+Sans&v2);

– Javascript :
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Open+Sans:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>

puis le code à intégrer dans votre CSS :

code CSS

Exemple 1 : h1 { font-family: 'Open Sans', sans-serif; }
Exemple 2 : .menu1 { font-family: 'Dancing Script', cursive; }

Donc sur le site mentionné au début, j’ai appliqué 2 webfonts Google :
– celle du nom du site (en haut) qui est la même que celle de la citation,
– celle du menu qui est devenue également la police par défaut de tout le texte du site.

en cliquant sur le bouton
on peut ajouter plusieurs polices à la collection

pour grouper le code :
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Dancing+Script&v2' rel='stylesheet' type='text/css'>