ven.
28
oct.
2011
Conseil design : police personnelle dans le Header
Vous aimeriez changer un peu le design de votre site Jimdo, mais vous ne savez pas trop comment ? Que diriez-vous de changer un peu la police d'écriture sur votre site ?
Avec un outil comme Google Webfonts vous allez pouvoir créer une police d'écriture personnalisée pour l'en-tête (Header) de votre site, rien que ça !
Suivez le guide et ce tutoriel pour savoir comment procéder...
1. Rendez-vous sur http://www.google.com/webfonts et, très important, laissez cette page ouverte dans un onglet de votre navigateur Internet pendant tout le temps de l'opération !
2. Choisissez une police d'écriture de votre choix.
3. Avec un clic sur "Quick-Use", en face de chaque police d'écriture (à droite) vous serez redirigé sur une zone de paramétrage (voir ci-dessous). Vous pourrez alors définir d'autres options pour votre police (italique, gras, etc).
4. Au point "3. Add this code to your webiste" de la page du service Google, vous est donné un code. Copiez-le et allez le coller sur votre site dans "Paramètres" -> "Site Internet" -> "Modifier le Head". Pensez bien à enregistrer !
5. Copiez alors le code suivant sous le précédent, toujours dans "modifier le Head".
<style type="text/css">
#emotion-header-title {xxxxxxxxxxxxxxxxxxxxxxxxxxx}
</style>
6. Retournez sur le site Google et récupérez maintenant le morceau de code situé dans la zone "4. Integrate the fonts into your CSS".
Il faut maintenant intégrer ce code à la place des xxxxxxxxxxxxxxxxxxx du code précédent déjà copié dans le Head (dans l'exemple suivant : font-family: 'Marck Script', cursive; )
7. Attention : Il faut ensuite bien placer le morceau de code suivant :
!important
en fin de ligne avant le point-virgule ";"
Dans notre exemple, cela donne donc :
font-family: 'Marck Script', cursive !important ;
8. Cliquez maintenant sur "enregistrer" et chargez votre site Jimdo une nouvelle fois.
9. Et voilà à quoi cela peut ressembler au final...pas mal non ?
Commentaires: 27(Discussion fermée)
-
#1
A tester
merci! -
#2
Bonjour,
Je pense avoir bien suivi la procédure et rien ! Pas de changement? -
#3
Moi aussi, aucun changement.
-
#4
Ben, çà marche pas chez moi,
-
#5
@Richoult : Je me suis rendu sur votre site et cela semble pourtant avoir bien fonctionné (votre police du Header est bien une police crée avec Google Fonts... Aviez-vous bien rafraîchis la page sur votre navigateur? @lac-du-rousillou : Vous n'avez rien dans votre Head (pas de code), réessayez peut-être de suivre la procédure étape par étape ?
-
#6
Oui, effectivement, j'avais pas rafraichis.
GG pour ce tuto ! -
#7
Bonne idée pour la personnalisation de nos sites. Merci l'équipe pour tout votre travail.
-
#8
Merci pour cette astuce. Je n'ose pas trop mettre des polices d'écritures trop originale pour mon contenu, mais si c'est pour le titre ça me plaît de pouvoir utiliser un contenu optimisé.
-
#9
Je v essayer, j'attendais ça avec impatience. j'espère trouver un style d'écriture qui me convienne. Merci d'avance...
-
#10
Super ! ça marche nickel !!!! MERCi, trop bien !....
-
#11
Mais comment ajouter sa propre écriture manuscrite à celles disponibles sous Jimdo ou Google webfonts ?
Mystère -
#12
@uneliste : C'est possible, il existe par exemple un service comme http://www.fontself.com/ (en anglais uniquement) qui permet de créer sa propre police d'écriture et ensuite de l'intégrer pourquoi pas à un site Jimdo. Mais ce n'était pas le sujet de ce tutoriel ;) Peut-être pour un prochain ?
-
#13
Très bon tuto...facile à mettre enoeuvre pour un effet visuel surprenant au final..
-
#14
Pas si simple que ça mais je désespère pas ! Merci quand même.
-
#15
merci pour ce tuto qui correspond à mes attentes, vous êtes très réactifs concernant les demandes de vos utilisateurs du site jimdo, merci beaucoup !! ^^
-
#16
Merci pour le conseil je vais l'utiliser des aujourd’hui !
-
#17
Super,
je n'avais pas le réflexe de regarder ce blog. Je reviendrai plus souvent.
Merci -
#18
Ce n'est pas TRES facile mais en suivant le pas-à-pas j'y suis arrivé... MERCI car la palette offerte dans le header n'est pas très étoffée.
Je suis friand de ces améliorations de <Jimdo -
#19
Je crois avoir bien suivi les instructions ... rien n'a changé !!
Quand vous dites rafraichir la page ?? -
#20
Cela veut dire relancer un chargement de la page (ou rentrer de nouveau l'adresse URL dans la barre URL et appuyer sur "entrée")
Cela peut aussi vouloir dire vider la mémoire cache du navigateur dans certains cas :
http://fr.jimdo.com/wiki/Comment_vider_le_cache_de_mon_navigateur%3F
-
#21
impeccable, ça marche super !! merci
-
#22
Excellent. Merci beaucoup encore une fois pour le travail que vous faites.
-
#23
Formidable, ça marche !
Merci beaucoup ! -
#24
Je pense avoir tout fait comme il le faut , mais cela ne fonctionne pas ou j'ai oublié une étape j'aimerais vraiment que ca marche on peut m'aider ?
-
#25
Merci beaucoup c'est super maintenant !! ;)
-
#26
Bonjour est ce possible de le faire aussi pour le texte insérer dans le Body ? car les polices de jimdo sont pauvres !
-
#27
@sirockbt : Oui , je ne suis pas spécialiste Design, mais je crois bien qu'il suffit de trouver dans le code CSS quelle est la variable gérant l'ensemble du texte et de l'intégrer dans le code...donc au mieux, s'y connaître un peu en code CSS ou de poser la question sur le forum ;)
Version imprimable