Une police exotique dans le header de votre site

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 le titre du header de votre site avec ces polices qui sortent de l'ordinaire. Pour utiliser ces mêmes polices afin de styler les titres de votre site, suivez ce lien. Pour les appliquer aux textes de votre site, c'est par ici.

Etape 1 : écrire le titre de votre header

En mode admin, cliquez sur Modifier le header :

Screenshot
Cliquez sur Modifier le header

Puis cliquez sur l'onglet Titre :

Cliquez sur l'onglet Titre
Cliquez sur l'onglet Titre

Ecrivez dans le cadre de saisie le nom (ou titre) de votre site. Utilisez la réglette à droite pour définir sa taille et jouez avec les deux curseurs en bas pour fixer sa position dans le header du site. Enfin, choisissez grâce à la palette de couleurs à droite sa couleur :

Choisissez la couleur du titre de votre site
Choisissez la couleur du titre de votre site

Enregistrer vos modifications avant de passer à la suite : le choix d'une police exotique.

Flèche vers le haut

Etape 2 : choisir une police exotique

Je vous donne ci-dessous les 15 polices qu'on trouve dans JimdoPro et JimdoBusiness ! Choisissez-en une pour styler le header de votre site.

Où insérer le code ?

Copiez-collez le code 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

N'oubliez pas d'enregistrer votre modification.

1. Police Dancing Script

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

/* Police exotique du header */

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

/*]]>*/
</style>

2. Police Coming Soon

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Coming+Soon%3A400);
#emotion-header-title {font-family: "Coming Soon", cursive !important;}

/*]]>*/
</style>

3. Police Droid Sans

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans%3A400);
#emotion-header-title {font-family: "Droid Sans", sans-serif !important;}

/*]]>*/
</style>

4. Police Josefin Sans

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans%3A400);
#emotion-header-title {font-family: "Josefin Sans", sans-serif !important;}

/*]]>*/
</style>

5. Police Oleo Script

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Oleo+Script%3A400);
#emotion-header-title {font-family: "Oleo Script", cursive !important;}

/*]]>*/
</style>

6. Police Bitter

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Bitter%3A400);
#emotion-header-title {font-family: Bitter, serif !important;}

/*]]>*/
</style>

7. Police Droid Serif

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Droid+Serif%3A400%);
#emotion-header-title {font-family: "Droid Serif", serif !important;}

/*]]>*/
</style>

8. Police Marck Script

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Marck+Script%3A400);
#emotion-header-title {font-family: "Marck Script", cursive !important;}

/*]]>*/
</style>

9. Police Shadows into light

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light%3A400);
#emotion-header-title {font-family: "Shadows Into Light", cursive !important;}

/*]]>*/
</style>

10. Police Crimson Text

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Crimson+Text%3A400);
#emotion-header-title {font-family: "Crimson Text", serif !important;}

/*]]>*/
</style>

11. Police Raleway

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Raleway%3A100);
#emotion-header-title {font-family: Raleway, cursive !important;}

/*]]>*/
</style>

12. Police Vollkorn

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Vollkorn%3A400);
#emotion-header-title {font-family: Vollkorn, serif !important;}

/*]]>*/
</style>

13. Police Share

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Share%3A400);
#emotion-header-title {font-family: Share, cursive !important;}

/*]]>*/
</style>

14. Police Oswald

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Oswald%3A400);
#emotion-header-title {font-family: Oswald, sans-serif !important;}

/*]]>*/
</style>

15. Police Lobster

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

/* Police exotique du header */

@import url(http://fonts.googleapis.com/css?family=Lobster%3A400);
#emotion-header-title {font-family: Lobster, cursive !important;}

/*]]>*/
</style>

Et voilà, c'est aussi simple que cela ! Il vous faudra peut-être ajuster la taille ou la position du titre de votre site dans le header : repassez donc à l'étape 1 pour ce faire.

Ca vous a plu ? Dites-le !

Écrire commentaire

Commentaires : 5
  • #1

    monreseau (mercredi, 12 juin 2013 14:49)

    Bonjour,
    Je suis encore en version free en attendant la finalisation du site et le passage en pro. Sur cette version, est-il possible de faire des modifications sur la barre principale elle-même (accueil, etc.) : couleur, polices, ou autres ?
    Merci.
    PS. votre site est une mine d'or.

  • #2

    Isabelle (mercredi, 12 juin 2013 18:38)

    Bonjour ! Oui, ces modifs sont possibles sur votre template en insérant de la CSS dans Paramètres > Modifier le Head :

    <style type="text/css">

    div#nav_top {
    background-color: black !important; /* Barre noire */
    }

    .altcolor a:link,.altcolor a:visited {
    color: white !important; /* Police des liens de la barre en blanc */
    font-size: 23px; /* Taille de la police des liens de la barre */
    font-family: Courier New; /* Type de police des liens de la barre */
    }

    </style>

    Cordialement,

    Isa

  • #3

    bridgeclubetrembieres (samedi, 16 novembre 2013 18:19)

    Explication très claire et facile pour la police du Header.
    Merci !!!
    Est-ce possible sur les titres et sur le menu
    Bonsoir
    annepetitmoreau@gmail.com

  • #4

    Inform'astuces (samedi, 18 janvier 2014 16:58)

    Merci beaucoup pour toutes ces polices !

  • #5

    Isabelle (lundi, 20 janvier 2014 15:04)

    @bridgeclubetrembieres : oui, c'est aussi possible pour les titres (voir ce tutoriel : http://realia.jimdo.com/modifier-le-design/polices-exotiques-pour-vos-titres/) Cela l'est également sur les menus, mais c'est plus difficile car les noms des menus changent en fonction des templates... donc je n'ai pas écrit de tutos sur le sujet.

Ruban