Astuce : utilisation de polices de caractères Google web fonts

Dans TypePad, si vous souhaitez sortir des sentiers battus côté police de caractères, vous pouviez utiliser TypeKit pour amener plus de diversité sur l'un ou l'autre des éléments de votre blog (titre, corps de note, modules…).

Des alternatives à TypeKit existent, dont notamment Google web fonts, qui s'est récemment dôté d'une interface plus ergonomique, l'occasion pour nous de vous expliquer comment en tirer parti pour votre blog.

Pour commencer, démonstration par l'exemple, via un blog récemment redesigné, celui d'Art de Vivre.
Sans Google web fonts

Avec Google web fonts

Si la version sans Google web fonts est tout à fait agréable (et standard web), vous noterez que celle utilisant ce service est plus agréable à la lecture, tout en offrant une petite touche personnelle bienvenue.

Vous pouvez vous aussi arriver à ce résultat en vous rendant sur l'interface de Google web fonts pour faire votre marché de police de caractères.

Sur cette interface nous avons ainsi, pour le blog Art de Vivre, choisi la police de caractères Tangerine pour son titre de blog et ses titres de modules (une police travaillée et élégante pour tout ce qui est titrage) et une dénommée Lato pour le corps de texte (sans-serif impeccable avec plein de variations pour tous les besoins des paragraphes).

Nous avons essayé différentes variantes depuis l'écran "Review" proposé par le service de Google.

Puis nous avons cliqué sur "Use" pour récupérer le code nécessaire à l'application de ces polices sur le blog (Tangerine en Bold 700 et Lato en Book 300).
Sur ce même écran, dans le paragraphe 3, nous avons sélectionné l'onglet "@import", et copié/collé le code donné :

@import url(http://fonts.googleapis.com/css?family=Tangerine:700|Lato:300&v2);

dans "Habillage personnalisé > CSS personnalisé".

Une fois ceci fait, il ne nous reste plus qu'à indiquer sur quels éléments ces polices doivent s'appliquer via :

body {
    font-family: 'Lato',Helvetica,Arial,sans-serif;
    font-weight: 300;
}
pour le corps de texte global

#banner-header a, .module-header {
    font-family: 'Tangerine', Georgia, serif;
    font-weight:700;
}

pour le titre en bannière et ceux de la colonne latérale.

Vous noterez que nous avons ajouté des polices de caractères de remplacement au cas où le service Google soit indisponible pour une raison ou une autre.

Vous pouvez évidemment affiner le nombre de polices utilisées ainsi que les éléments du blog concerné sur le même mode, en veillant simplement à copier/coller le code généré par Google web fonts une fois les polices choisies, et, dans TypePad, en mettant à jour votre CSS personnalisé.

Pour rappel, les éléments classiques de TypePad peuvent être modifiés via l'appel aux sélecteurs CSS suivants :
#banner-header // titre de blog
#banner-description // description du blog
#nav // éléments de la barre de navigation
#alpha // 1ère colonne depuis la gauche de l'écran
#beta // 2ème colonne depuis la gauche de l'écran
#gamma // 3ème colonne depuis la gauche de l'écran
.entry-header // titre de note note
.entry-content // contenu de la note
.entry-footer // pied de la note
.module-header // titre de module
.module-content // contenu du module
#footer // éléments du pied de page

A vous de jouer :-)