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'>
Articles qui pourraient vous intéresser :
- Les extensions WordPress utilisées sur ce blog
- Clocktweets : test de la nouvelle version beta
- Comment obtenir des Bitcoins gratuits ?
- Train : comment éviter de rester en rade
- Linux : distribution Emmabuntüs
- GymPact, motivation pour Runkeeper
- Fitbit : Fit Wiz, application Android
- TweetDeck : insérer un tweet dans un article
- Pokki, le magasin d’applications pour votre ordinateur
- Télécharger des vidéos à partir du web
Bonjour Franck encore un très bon article comme toujours !
Mais comment tu fais ? 😉
Ping : Les acteurs du Web en ont parlé [#3] | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité
Ping : Wordpress : utiliser des webfonts Google | Un café, mon bloc note… | Pierre André Fontaine developpement d'affaires