• 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');}
    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 toutes les propriétés par rapport à la police :
    {font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

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

    Pour modifier TOUT le texte du blog :
    #body {font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

    Pour modifier les titres de modules de votre menu, ou de vos menus :
    #menu1 .module_menu titre,
    #menu2 .module_menu_titre
    {font-family:NOM DE POLICE;

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

    Pour modifier les liens du menu de header :
    #menu {font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

    Pour modifier les titres d'articles, de pages, de livres d'or, de rubriques... :
    .module_titre_contenu,.module_titre_contenu a p,
    .module_titre_contenu a

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

    Pour modifier le pseudo dans les commentaires :
    .commentpseudo, .commentpseudo a
    {font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}
     

    Pour modifier le slogan du header :
    #slogan_header{font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}
    et le titre :
    #titre_header{font-family:NOM DE POLICE;
    font-size:TAILLE DE LA POLICEpx;
    letter-spacing:ESPACEMENT DES LETTRESem;
    line-height:HAUTEUR DE LIGNE%;}

    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
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :