-
Tuto CSS#3 : Installer une police sur son blog
Alors, comme annoncé, voici l'article sur "comment installer une police sur son blog et l'ustiliser". J'ai eu beaucoup de demandes par MP sur le sujet et j'en ai un peu marre de prendre 30 min à chaque fois pour expliquer, là en tout ça fait 3h30, c'est beaucoup trop ^^'
Dans cet article vous apprendrez à
- Télécharger une police d'écriture
- Héberger cette police sur ekla et l'installer sur votre blog avec le CSS
- L'utiliser sur les titres des articles
- L'utiliser sur les titres des menus
1. Télécharger la police
Entrons tout de suite dans le vif du sujet : pour télécharger une police, rendez-vous sur dafont. Je vous conseille vivement la catégorie "Script" qui propose des trucs vraiment très jolis.
Bref, donc imaginons vous avez un coup de coeur sur la police "Beyond the Mountains"
Juste à côté il y a écrit "Télécharger". Sans surprise, vous cliquez dessus, et hop, c'est bon!Ce qui suit est facultatif : si vous ne le faites pas, installer la police sur ekla fonctionnera quand même mais elle ne sera pas installée sur votre ordi (donc utilisation impossible sur traitement de texte par exemple)
Ensuite, vous allez dans vos documents pour retrouver la police téléchargée. Je sais pas trop comment ça se présente pour les PCs vu que je suis sur mac, mais grossomodo ça doit pas être très différent de ça.
Donc ici, vous avez le choix entre plusieurs documents différents : un qui se termine par ".otf", un autre par ".png", un autre par ".ttf" et le dernier par ".rtf". Le 2ème ne sera pas utile car c'est juste une image, un aperçu de ce que la police peut donner ; pas plus que le dernier qui ne nous intéresse pas trop. On va en revanche se pencher sur le "ttf" et le "otf" qui sont les polices en elles-mêmes. On se fiche de laquelle mais il faut en choisir une. Double-clic dessus, et ça affiche ça (clique).
Vous cliquez sans surprise sur "Installer la police" et le tour est joué.2. Héberger la police sur ekla et l'installer sur le blog
Ok, à présent, il est temps de l'héberger sur ekla. Pour ce faire, rendez-vous dans "Contenu" --> "Gérer les fichiers", comme ceci. Vous cliquez sur "Uploader un fichier", puis vous sélectionnez le bon fichier (on a donc dit soit se terminant par "otf", soit par "ttf"). Ensuite, vous cliquez dessus (il est à présent normalement dans "Tous les fichiers") et vous copiez-collez son url dans le CSS (ne faites pas tout de suite Appliquer et sauvegarder, ça ne fonctionnera pas).
Ensuite, installons la police sur le blog. Rendez-vous dans le CSS, où vous collerez ce code (je l'ai trouvé sur le blog de manola et je la crédite bien que je ne pense pas qu'elle l'ai inventé ou quoi) :
@font-face {font-family: "Beyond the Mountains";
src: url('URL QUE VOUS AVEZ COPIÉE PLUS TÔT DANS LE CSS');}
Il permet de mémoriser la police sur le CSS afin de pouvoir l'utiliser par la suite. Vous pouvez bien entendu changer le nom de la police si vous n'avez pas pris celle de l'exemple, ou plus simplement mettre un nom de votre choix si vous voulez (ex : police titres menus), il faudra juste réutiliser ce nom quand vous voudrez utiliser la police quelque part.
Comme écrit sur le code, vous devez mettre entre les deux " ' " l'url que vous avez copiée plus tot dans le CSS (sans espaces entre les deux signes " ' ")
Bon, là on a achevé le gros du boulot, on peut passer à...
3. Utiliser la police sur le titre des articles
Maintenant qu'on a fait tout ça, il ne nous reste plus qu'à utiliser cette police!
Déjà donc, sur les titres des articles :
.module_titre_contenu {font-family: Beyond the Mountains;}
En bleu/violet, le sélecteur pour le titre des articles
En vert, la propriété qui permet de changer la police d'écriture
En bleu, la valeur, à savoir la police en elle-même (à changer bien sur selon la police. Si comme évoqué tout à l'heure vous avez choisi comme titre de police "police titres articles", alors vous écrivez ça).
Et bien sur, en rouge les accolades à mettre en début et fin de code, et en gris les points virgules qui séparent les propriétés entre elles.4. Utiliser la police sur les titres des menus
Dernière astuce, plus pour être sûre que vous compreniez le mécanisme, on change la police des titres des menus (pas menus de l'en-tête mais du côté):
#menu1 .module_menu_titre {font-family: Beyond the Mountains;}
En bleu/violet le sélecteur du menu. À savoir : si vous avez un menu à gauche, c'est "#menu1", à droite c'est "#menu2" et à droite et à gauche il faut dupliquer le code et l'écrire pour les deux sélecteurs.
En violet, le sélecteur qui code pour le titre d'un module et qui permet ici de clarifier ce qu'on modifie dans le menu
Et encore une fois, en vert la propriété pour changer la police et en bleu la police en elle-même (valeur).5. Changer un autre élément
Comme vous l'aurez donc certainement compris, pour changer la police d'un élément il suffit de suivre ce modèle :
sélecteur de ce que vous voulez modifier {font-family: Nom de la police;}
Bref, voilà, j'espère que cet article vous aura plu, n'hésitez pas à me signaler si quelque chose n'est pas clair ^^
J'espère que j'aurais moins de MP sur cette questions maintenant du coup xD
Un petit retour fait toujours plaisir ^^
Votre dévouée D r e a m
Tags : police, titre, installer, css, blog
-
Commentaires
YOUPI !!! IL EST SORTI !!!! T'ES LA MEILLEURE PROF DU MONDE, DREAMY !!!
What j'ai fait plein de rimes en "I"...
Chanson débile pour les MGAC (mamies gâteuses à chats) à chanter sur l'air de Libérée Délivrée
mon p'tit chat
c'est l'plus doux
il est cromignon mon minou
mon p'tit chat
c'est l'plus chou
son pelage est un doudou
Merci, merci, ce n'est que le talent.
C'est sûr quel blog Anothe ? Tu veux que je regarde ce que t'a fait pour essayer de comprendre ce qui marche pas ?
Ah j'ai compris : tu as téléchargé un ficher ".zip" et pas ".ttf" ou ".otf"
Attend j'essaye d'arranger ça
C'est bon j'ai remplacé le code d'installation de la police avec la bonne url ^^
Le titre des articles est bien avec ta police du coup ^^
Pour pas te re-tromper n'oublie pas de vérifier le type de fichier que c'est, si c'est zip ça fonctionne pas ;)
Ajouter un commentaire
Super merci beaucoup :3