• Installer une police et l'utiliser

    Dans cet article, voyons comment personnaliser les titres ou la police de texte de notre blog.
    1> Installation
    2> Codage pour l'utiliser sur différentes parties.

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

              I N S T A L L A T I O N           

    Vous allez sur votre site de police (personnellement, j'utilise Dafont) et recherchez la police de votre choix. Une fois fait, vous cliquez sur "Télécharger".
    Installer une police et l'utiliser
    Installer une police et l'utiliser

    Vous ouvrez le fichier .zip, et cette étape est très importante ! Sinon, votre code ne fonctionnera pas. Pour ça, il vous faut un logiciel de dézippe tel que WinZip ou WinRar. Apèrs ça, vous avez un fichier .otf ou .ttf sur votre ordinateur.

    Ensuite, vous vous connectez sur votre blog, puis allez sur Contenu > Gérer les fichiers > et vous uploadez le fichier .otf ou .ttf.Installer une police et l'utiliser

     

    Maintenant, vous allez taper sur votre fenêtre d'ajout de CSS ce code :
    @font-face {font-family: "NOM DE POLICE";
        src: url('URL DE POLICE');}

     @font-face {font-family: "NOM DE POLICE";
        src: url('URL DE POLICE');}

     


    L'url de la police est à copier au préalable sur la fenêtre de gestion des fichiers.
    Installer une police et l'utiliser
    Installer une police et l'utiliser

              U T I L I S A T I O N         

    Maintenant que vous avez installé votre police, vous pouvez l'utiliser, mais pas n'importe comment. Il faut savoir que la nom que vous allez donner à votre police dans le champ "NOM DE POLICE" sur le code précédent est à entrer EXACTEMENT pareil sur les autres codes que l'on va mettre.

    Voici la propriété pour mettre une police spécifique :


    {font-family:NOM DE POLICE;}

     

    Voici les endroits (non-exhaustif) que l'on peut modifier avec.

    GÉNÉRAL
    Tout le texte du blog  #body
    Liens a, a:hover 

     

    HEADER
    Titre du blog #titre_header a 
    Slogan #slogan_header 
    Menu du header #menu, #menu a

     

    MENUS
    Menus entiers #menu1, #menu2
     Titres des menus #menu1 .module_menu_titre
     #menu2 .module_menu_titre
      
     Contenu des menus  #menu1 .module_menu_contenu
     #menu2 .module_menu_contenu
     

     

    CONTENUS
    Titres des contenus . module_titre_contenu,
    .module_titre_contenu a p,
    .module_titre_contenu a
    Contenu .module_contenu

     

    COMMENTAIRES
    Contenu du comm' .commentbody
    Pseudo .commentpseudo, .commentpseudo a
     Numéro de comm' .commentnumber  
     Date  .commentdate 

     

    Voilà, c'est à peu près tout. Bien évidemment, vous pouvez modifier la police de tout et n'importe quoi, mais voilà en gros.
    Pour avoir tous les détails de propriétés par rapport à la police, cliquez ici.

    Toutes les propriétés de polices »

  • Commentaires

    1
    Samedi 22 Avril à 15:05

    Commmentaire test

    2
    Dimanche 28 Mai à 16:53

    Wow merci beaucoup ça fais longtemps que je cherche un article qui explique ça sur ekla :D Super blog!

    3
    Lundi 5 Juin à 12:25

    Coucou j'aimerais bien mettre une police sauf que moi je n'ai pas tout c'est choses pour mettre le police est-ce que tu pourrais m'en mettre une merci

    de préférence celle-ci

    http://www.dafont.com/fr/kg-a-little-swag.font

    ou celle-ci

    http://www.dafont.com/fr/paper-banner.font

    bis ;)

    • Voir les réponses
    4
    Samedi 23 Septembre à 14:13

    Bonjour! Très bon tutoriel! Sauf que ça ne marche pas pour moi...Comment ça se fait ?

    5
    Samedi 23 Septembre à 14:14

    Peux-tu me donner le code que tu as mis ?

    6
    Samedi 23 Septembre à 14:19

    Merci bien de m'aider ! Tout d'abord, j'ai mis : @font-face {font-family"NOM DE POLICE";

        srcurl('URL DE POLICE');}

    et j'ai suivi le tutoriel, donc j'ai mis ma police et le lien téléchargé.

    Ensuite, j'ai mis ce code : #menu {font-family:NOM DE POLICE;

    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

    et j'ai mis la hauteur de ligne, la police, espacement de lettre etc...

    Puis j'ai mis "Appliquer et sauvegarder" mais ça n'a pas marché.

    7
    Samedi 23 Septembre à 14:45

    Ok, je sais pourquoi.
    Au lieu de mettre #menu, mets #menu a

    x)

    8
    Samedi 23 Septembre à 14:49

    D'accord, merci beaucoup pour ton aide :)

    9
    Samedi 23 Septembre à 15:41

    Désolée de t'embêter encore, mais ça ne marche pas non plus quand j'insère ce code :

    #body {font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

     

     

    10
    Samedi 23 Septembre à 16:54

    Après avoir fait des essais, j'ai compris ce qui clochait dans le code.

    Il faut ue tu décoches tout dans :
    APPARENCE > MODIFIER LE THÈME
    - Format du blog > Texte & Liens
    - Menus > Texte & Liens
    - Contenu > Texte & Liens

    11
    Samedi 23 Septembre à 17:03

    Ah d'accord, merci, je vais essayer !

    12
    Samedi 23 Septembre à 17:08

    Donc après avoir tout décroché, qu'est-ce que je fais ?

    13
    Samedi 23 Septembre à 17:09

    Parce que j'ai essayé de mettre le code CSS mais ça marche toujours pas :/

    14
    Samedi 23 Septembre à 18:32

    Si tu mets ça, est-ce que sa marche ?
    (le nom de police, ensuite tu pourras le changer hein, c'est juste pour voir si sa marche)

    #body {font-family:Palatino Linotype;
    font-size:10px;}

     

    15
    Samedi 23 Septembre à 20:08

    Oui! Ça marche, mercii ^^

    16
    Dimanche 5 Novembre à 18:40

    Impossible de m'en sortir, j'ai pourtant l'impression d'avoir suivit toutes les étapes !

    17
    Dimanche 5 Novembre à 18:45

    Montre-moi ton code CSS pour voir

    18
    Dimanche 5 Novembre à 18:50

    J'ai écris exactement :

    @font-face {font-family: kanzlei;
        src: url(http://ekladata.com/y55WFWRB9Zxu4-sy6rPbJy-4fTs/kanzlei.zip);}
     #body{font-family:kanzlei;}

    19
    Dimanche 5 Novembre à 19:43

    Il faut que tu penses à décocher toutes les propriétés de polices dans les Textes & Liens (apparence > modifier le thème > texte & liens / menu 1 et menu 2 > texte & liens / contenu > texte & liens

    20
    Dimanche 5 Novembre à 19:53

    C'est pourtant bien ce que j'ai fait !

    21
    Dimanche 5 Novembre à 20:00

    Ah naaan ! J'ai trouvé ce qui cloche. Tu as directement importé le fichier .zip, or il faut l'ouvrir avant !

    Mets ce code, ça marchera normalement :

    @font-face {font-family: kanzlei;
        src: url('http://ekladata.com/wU3Dj6g1qfmD1pnHvnyKoaYKyxg/KANZL.ttf' );}
     #body{font-family:kanzlei;}

    22
    Dimanche 5 Novembre à 20:02

    Merci beaucoup, je vais essayer !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :