WordPress : utiliser des webfonts Google

Publié le by

Google web fontsLors 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.

citation 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
Google web fonts

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

Filtres

Filtres

Catégories Thickness Script mode

– en affichant par mot, citation ou paragraphe :
Mot, citation ou paragraphe

affichage mot (word)

affichage mot (word)


Affichage citation (Sentence)

Affichage citation (Sentence)


Affichage paragraphe (Paragraph)

Affichage paragraphe (Paragraph)

Pour chaque police :
– un clic sur aperçu ouvre une fenêtre d’aperçu complet de la police
aperçu complet
– un clic sur réglages permet d’accéder aux paramètres à utiliser

choix du style

choix du style


choix du type de caractères

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

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

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 ajouter à la collection
on peut ajouter plusieurs polices à la collection
collection
pour grouper le code :
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Dancing+Script&v2' rel='stylesheet' type='text/css'>

 

Articles qui pourraient vous intéresser :

 

Vous aimez cet article ? Partagez-le !

3 commentaires sur “WordPress : utiliser des webfonts Google”

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.