Styler vos titres avec des polices exotiques

Eh oui, les utilisateurs de JimdoFree peuvent eux aussi bénéficier des polices exotiques proposées par JimdoPro et JimdoBusiness ! Dans ce tutoriel, je vous donne 15 codes pour styler les titres de votre site avec ces polices qui sortent de l'ordinaire. Pour utiliser ces mêmes polices afin de styler le titre du header de votre site, suivez ce lien. Pour les appliquer aux textes de votre site, c'est par ici.

Etape 1 : écrire des titres dans Jimdo

Petit rappel sans doute pas nécessaire, mais sait-on jamais ?...

Ecrire des titres de rang 1, 2 et 3

Pour créer un titre dans Jimdo, on ajoute un élément Titre :

Ajouter un titre dans Jimdo
L'élément titre de Jimdo

On écrit le titre dans le champ réservé à cet effet. Puis, on coche une option pour déterminer si ce titre sera de rang 1, 2 ou 3 en sachant qu'il est recommandé de respecter la hiérarchie suivante :

  • titre 1 : grand titre (de page par exemple)
  • titre 2 : titre (de section par exemple)
  • titre 3 : sous-titre (de paragraphe par exemple)
Titre 2
Titre de rang 2
Titre de rang 3
Titre de rang 3

Insérer des titres 4 dans Jimdo

Pour insérer des titres de rang 4 dans Jimdo, il faut procéder manuellement. Voici comment :

  • Ajoutez un élément Texte :
Elément Texte
  • Ecrivez votre titre dans l'éditeur :
Ecrire le titre comme du texte normal
Ecrire le titre comme du texte normal
  • Appuyez sur le bouton HTML de l'éditeur de texte :
Bouton HTML de l'éditeur de texte
  • Dans la fenêtre qui surgit, remplacez les deux p du code par deux h4 :
Remplacer les P du code
Mettre les titres 4
  • Cliquez sur le bouton Mettre à jour :
Mettre à jour le code
  • Et voilà un titre de rang 4 ! N'oubliez pas d'enregistrer !
Bouton Enregistrer

Flèche vers le haut

Etape 2 : choisir une (ou plusieurs) polices exotiques

Je vous donne ci-dessous les 15 polices qu'on trouve dans JimdoPro et JimdoBusiness ! Faites votre marché en sélectionnant une (ou plusieurs) polices pour styler les titres de votre site.

Attention : ne sélectionnez pas plus de 3 polices différentes, sans quoi vous allez sérieusement ralentir le chargement de vos pages ! (En outre, votre design risque de perdre en sobriété et en lisibilité... )

Où insérer les codes fournis ?

Copiez-collez le(s) code(s) fourni(s) dans le cadre de saisie qui apparaît quand vous cliquez, dans la barre d'admin de votre site, sur Paramètres > Modifier le Head :

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

1. Police Dancing Script

Dancing-script
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Dancing+Script%3A400);
h1, h2, h3, h4 {font-family: "Dancing Script", cursive;}

/*]]>*/
</style>

2. Police Coming Soon

Coming Soon
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Coming+Soon%3A400);
h1, h2, h3, h4 {font-family: "Coming Soon", cursive;}

/*]]>*/
</style>

3. Police Droid Sans

Droid Sans
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans%3A400);
h1, h2, h3, h4 {font-family: "Droid Sans", sans-serif;}

/*]]>*/
</style>

4. Police Josefin Sans

Josefin Sans
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans%3A400);
h1, h2, h3, h4 {font-family: "Josefin Sans", sans-serif;}

/*]]>*/
</style>

5. Police Oleo Script

Oleo Script
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Oleo+Script%3A400);
h1, h2, h3, h4 {font-family: "Oleo Script", cursive;}

/*]]>*/
</style>

6. Police Bitter

Bitter
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Bitter%3A400);
h1, h2, h3, h4 {font-family: Bitter, serif;}

/*]]>*/
</style>

7. Police Droid Serif

Droid Serif
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Droid+Serif%3A400%);
h1, h2, h3, h4 {font-family:"Droid Serif", serif;}

/*]]>*/
</style>

8. Police Marck Script

Marck Script
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Marck+Script%3A400);
h1, h2, h3, h4 {font-family: "Marck Script", cursive;}

/*]]>*/
</style>

9. Police Shadows into light

Shadows into light
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light%3A400);
h1, h2, h3, h4 {font-family: "Shadows Into Light", cursive;}

/*]]>*/
</style>

10. Police Crimson Text

Crimson Text
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Crimson+Text%3A400);
h1, h2, h3, h4 {font-family: "Crimson Text", serif;}

/*]]>*/
</style>

11. Police Raleway

Raleway
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Raleway%3A100);
h1, h2, h3, h4 {font-family: Raleway, cursive;}

/*]]>*/
</style>

12. Police Vollkorn

Vollkorn
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Vollkorn%3A400);
h1, h2, h3, h4 {font-family: Vollkorn, serif;}

/*]]>*/
</style>

13. Police Share

Share
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Share%3A400);
h1, h2, h3, h4 {font-family: Share, cursive;}

/*]]>*/
</style>

14. Police Oswald

Oswald
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Oswald%3A400);
h1, h2, h3, h4 {font-family: Oswald, sans-serif;}

/*]]>*/
</style>

15. Police Lobster

Josefin Sans
<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Lobster%3A400);
h1, h2, h3, h4 {font-family: Lobster, cursive;}

/*]]>*/
</style>
Flèche vers le haut

Etape 3 : définir le champ d'application d'une police

Par défaut, un code applique la police correspondante à tous les titres de votre site, c'est-à-dire aux titres 1, titres 2, titres 3 (et, pour ceux qui les utilisent, aux titres 4). Mais vous pouvez aisément adapter le code à vos besoins :

  • si vous voulez appliquer une police exotique aux titres 1 et 2, mais pas aux titres 3 et 4
  • s vous voulez appliquer une police exotique seulement aux titres 2
  • si vous voulez appliquer une police exotique aux titres 2 et une police différente aux titres 3
  • etc... tout est possible !

D'abord, quelques explications...

Si vous avez sélectionné la police Dancing Script, vous avez copié-collé le code suivant :

<style type="text/css">
/*<![CDATA[*/

/* Police exotique des titres */

@import url(http://fonts.googleapis.com/css?family=Dancing+Script%3A400);
h1, h2, h3, h4 {font-family: "Dancing Script", cursive;}

/*]]>*/
</style>

Grosso modo, ce code tient en 2 lignes :

  • @import... : la ligne 1 injecte dans votre site la police Dancing Script
  • h1, h2, h3, h4 : la ligne 2 applique cette police aux titres de votre site en sachant que...
    • les titres 1 se nomment h1
    • les titres 2 se nomment h2
    • les titres 3 se nomment h3
    • les titres 4 se nomment h4

Par défaut, tous les titres de votre site passent en Dancing Script. Aussi, pour que seuls les titres 1 soient écrits dans cette police, effacez les noms des titres 2, 3 et 4 comme ceci :

h1 {font-family: "Dancing Script", cursive;}

En résumé : comment modifier le code fourni ?

Pour appliquer une police seulement aux titres 1

... effacez dans le code les éléments h2, h3, h4 :

h1 {font-family: "Dancing Script", cursive;}

Pour appliquer une police seulement aux titres 2

... effacez dans le code les éléments h1, h3, h4 :

h2 {font-family: "Dancing Script", cursive;}

Pour appliquer une police seulement aux titres 3

... effacez dans le code les éléments h1, h2, h4 :

h3 {font-family: "Dancing Script", cursive;}

Pour appliquer une police seulement aux titres 4

... effacez dans le code les éléments h1, h2, h3 :

h4 {font-family: "Dancing Script", cursive;}

Pour appliquer une police aux titres 1 et 4

... effacez dans le code les éléments h2 et h3 :

h1, h4 {font-family: "Dancing Script", cursive;}

Pour appliquer une police aux titres 2 et 3

... effacez dans le code les éléments h1 et h4 :

h2, h3 {font-family: "Dancing Script", cursive;}

Etc... vous avez compris le principe.

Flèche vers le haut

Etape 4 : définir la taille, la couleur (etc) de la police

Il vous reste à choisir la taille de vos titres, leur couleur, leur alignement, etc. Alors, là, c'est facile... puisque c'est comme d'habitude ! Cliquez, dans la barre d'administration de votre site sur Style :

Styler les titres du style
On style les titres 1 en visuel

Cliquez ensuite sur Titre 1 pour styler ce niveau de titre. Ignorez le menu déroulant intitulé "Style d'écriture", puisque vous avez inséré une police exotique. Par contre, vous pouvez choisir la taille de la police, son style (gras ou italique), son alignement et sa couleur, le tout en visuel. (Faites de même pour les titres 2 et 3).

Flèche vers le haut

Un exemple pour finir !

Je veux appliquer la police Dancing Script aux titres 1 et la police Josefin Sans aux titres 2 et 3. 

  • Je copie-colle le code de la police Dancing Script en le modifiant pour que seuls les titres 1 soient impactés :
<style type="text/css">
/*<![CDATA[*/

/* Police Dancing Script pour les titres 1 */

@import url(http://fonts.googleapis.com/css?family=Dancing+Script%3A400);
h1 {font-family: "Dancing Script", cursive;}

/*]]>*/
</style>
  • Je copie-colle le code de la police Josefin Sans en le modifiant pour que seuls les titres 2 et 3 soient impactés :
<style type="text/css">
/*<![CDATA[*/

/* Police Josefin Sans des titres 2 et 3 */

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans%3A400);
h2, h3 {font-family: "Josefin Sans", sans-serif;}

/*]]>*/
</style>
  • Dans la barre d'admin de mon site, je clique sur Style : là, comme avant, je choisis en visuel la couleur, la taille et l'alignement de mes titres.

C'est aussi simple que cela ! Il me reste à vous souhaiter un happy cut-n'paste :)

Vous avez la parole !

Écrire commentaire

Commentaires : 9
  • #1

    pm-dieteticienne (mardi, 19 février 2013 19:50)

    Super clair et parfait... Je me demandais s'il y avait une solution identique pour utiliser la police 4 par exemple mais pour le texte?

  • #2

    favoris (mardi, 19 février 2013 20:32)

    Oui, mais c'est l'objet d'un autre tutoriel à venir ;)

  • #3

    locgiteclossainthelier (jeudi, 16 mai 2013 12:20)

    Peut-on utiliser d'autres polices proposées par Google Fonts

  • #4

    Isabelle (jeudi, 04 juillet 2013 17:57)

    @locgiteclossainthelier : oui, on peut sans problème utiliser des Google Fonts. Je pensais faire un tuto dessus, mais j'ai été prise de vitesse ;) par l'excellent tuto de ZeKoolWeb, que je vous invite à lire ici : http://www.zekoolweb.com/2013/01/05/comment-changer-la-police-de-son-site-jimdo/

  • #5

    olivier (dimanche, 27 octobre 2013 15:06)

    Merci pour le clin d'oeil. Votre tuto est excellent, très détaillé, comme à votre habitude. Bravo pour votre travail d autant que je sais ce que cela représente en terme de temps ! Bonne suite a realia.
    OF

  • #6

    dress-me-up (mardi, 03 décembre 2013 23:09)

    Hello,

    je m'adresse ici, parce que je ne sais pas où demander ça.
    Est-il possible de changer la police du menu lors "du focus" ? (lorsque qu'on passe la souris dessus, ou lorsque qu'on le sélectionne ? )

  • #7

    Isabelle (lundi, 20 janvier 2014 14:24)

    @dress-me-up : oui, c'est possible avec le pseudo-selecteur :hover. Il suffit d'ajouter ce code dans le header (admin > paramètres > modifier le head) :

    <style>
    ul.mainNav1 li a:hover, ul.mainNav2 li a:hover, ul.mainNav3 li a:hover {
    font-family: "Lucida Grande", "Lucida Sans Unicode",Geneva, Arial, Verdana, sans-serif;
    }
    </style>

    A vous d'adapter le code en fonction de la police souhaitée.

  • #8

    Marine (lundi, 14 septembre 2015 18:12)

    Bonjour!

    J'essaye désespérément votre tuto, ainsi que celui de ZeCoolWeb, afin d'obtenir la police Pompiere pour mes titres (ainsi que le titre du site si possible). Rien ne fonctionne.... Auriez-vous une solution?
    Merci d'avance!

  • #9

    Isa (lundi, 14 septembre 2015 18:28)

    Bonjour Marine,
    Malheureusement la police Pompiere n'est pas disponible sur Google Fonts et ce tuto ne fonctionne qu'avec les polices de Google Fonts. De plus, la plupart des polices Google Fonts ont été intégrées de façon native dans Jimdo depuis la dernière grande mise à jour - rendant ce tutoriel obsolète.
    Bon courage !

Ruban