• 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"

    Désolée l'image rend bizarre j'ai fait une fausse manip :/

     


    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 Tags : , , , ,
  • Commentaires

    1
    Samedi 1er Mai 2021 à 16:19

    Super merci beaucoup :3

    2
    Samedi 1er Mai 2021 à 16:33

    De rien j'espère que ça t'a aidée ^^

    3
    Samedi 1er Mai 2021 à 16:37

    La tout de suite, non, mais pour plus tard, bien sûr ! ^^

    4
    Samedi 1er Mai 2021 à 17:32

    Merci! :D

    5
    Samedi 1er Mai 2021 à 18:56

    J'avais déjà essayé mais ça marche toujours pas ;-;

    6
    Samedi 1er Mai 2021 à 18:59

    YOUPI !!! IL EST SORTI !!!! T'ES LA MEILLEURE PROF DU MONDE, DREAMY !!!

    What j'ai fait plein de rimes en "I"...

    7
    Samedi 1er Mai 2021 à 19:05

    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.

    8
    Samedi 1er Mai 2021 à 20:02

    @Anothe : qu'est-ce qui ne marche pas ? Héberger la police ou l'utiliser ?

    9
    Samedi 1er Mai 2021 à 20:02

    @Doo : xD Ok je vais la tester pour voir si mon chat l'aime

    10
    Samedi 1er Mai 2021 à 20:03

    et @Lune blanche : éwé le talent de poète très chère :p
    Sinon contente de t'avoir aidée >w<

    11
    Samedi 1er Mai 2021 à 20:03

    Et juste, aussi, quel est le sélecteur du titre et du slogant du blog ?

    12
    Samedi 1er Mai 2021 à 20:05

    Bha j'ai mit les codes, j'ai installé la police mais elle ne s'affiche pas du coup

    13
    Samedi 1er Mai 2021 à 20:05

    C'est #titre_header pour le titre et #slogan_header pour le slogan je crois

    14
    Samedi 1er Mai 2021 à 20:05

    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 ?

    15
    Samedi 1er Mai 2021 à 20:06

    Ah sur un blog teste pour une commande, je te met admin [www]

    16
    Samedi 1er Mai 2021 à 20:10

    Ah j'ai compris : tu as téléchargé un ficher ".zip" et pas ".ttf" ou ".otf"

    Attend j'essaye d'arranger ça

    17
    Samedi 1er Mai 2021 à 20:12

    Bha quand j'installe y'a aps les fichiers ".ttf/.otf" donc je prend obligatoirement ".zip"

    18
    Samedi 1er Mai 2021 à 20:13

    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 ;)

    19
    Samedi 1er Mai 2021 à 20:13

    Ah je sais pas pourquoi ça t'a fait ça moi ça a fonctionné :/

    20
    Vendredi 7 Mai 2021 à 19:32

    J'ai essayé sur un blog et ça pas marché O~O

    21
    Vendredi 7 Mai 2021 à 19:38

    Moi non plus chuis sur Windows...

    22
    Samedi 4 Novembre 2023 à 16:04

    Ton lien "Dafont" nous envoie sur une autre page de ton blog "Tenues Décentes"

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :