• [Tuto] Installer sa propre police sur son blog

    Salut tout le monde!

    Beaucoup de personnes se demandent comment installer une police extérieure à eklablog sur son blog. C'est donc pour cela que je vous écris cet article.

    Installer sa propre police sur son blog

    Je tient a dire que cette technique m'as été expliquée par Lazulie et Lila. Tout ce tuto sera sous forme d'exemple avec des screnshots etc... Survolez les images pour + d'infos et cliquez sur les images pour voir + grand.

    Etape 1 : Trouver sa police

    Alors moi j'utilise  Dafont, une appli de polices libres de droit à télécharger.  Alors moi je vais prendre par exemple la police "Ducelin"

    Présentation dans la liste des polices  

    Et quand j'appuie sur la page de l'écriture je vois l'écriture de chaque lettre en majuscule et en minuscule, les chiffres et les caractères spéciaux.

    Page avec les caractères

     

    Etape 2: Télécharger la police sur son ordinateur

    C'est pas bien méchant il suffit juste d'appuyer sur le petit bouton télécharger .

     

    Etape 3: Télécharger la police sur son compte Eklablog

    Après avoir télécharger la police pensez à ouvrir le fichier! Car ce n'est pas un fichier que vous avez télécharger mais un virus ahaha! (Non mais je blague! Si j'avais téléchargé un virus mon ordi serait mort depuis longtemps!) Non sérieux c'est un dossier.

    Fichiers dans le dossier de la police

     

    Ben oui c'est bien mais quel fichier est le bon? Vous voyez celui nommé "ducelin.otf"? Eh bien c'est celui là le bon! L'autre contient un message du créateur de la police. Donc en gros pour vous le fichier qui est forcément le bon c'est un fichier sous le format "nomdelapolice.otf" ou "nomdelapolice.ttf". 

    Donc vous prenez votre fichier que vous télécharger sur votre compte Eklablog. Pour le télécharger il faut cliquez dans la menubar dans Contenu > Gérer les fichiers

    Vous avez juste à  appuyer sur le bouton télécharger.

     

    Etape 4: Rendre votre police utilisable 

    Eh oui après avoir fait tout ça il faut ajouter du CSS pour la rendre utilisale!

    Le code:  @font-face {font-family"NOM DE LA POLICE";
    srcurl('URL DU FICHIER');}

    Vous allez me dire "mais où on trouve ses infos?" Eh bien on le trouve dans la médiathèque!

    Alors sur la 1ere ligne il y a le nom de la police et sur la 2eme ligne l'adresse du fichier Alors sur la première ligne c'est le nom de la police et sur la 2eme c'est l'url du fichier.

     

    Etape 5: Mettre la police à certains endroits du blog

    Alors j'ai tout expliqué pour pouvoir l'utiliser. Mais comment la mettre sur le titre du blog par exemple? Avec ce code CSS:

    #titre_header a { 
     font-family : NOM DE LA POLICE ;
     line-height HAUTEUR DE LIGNE (en %);
     font-sizeTAILLE DU TEXTE (en px);
     color COULEUR;
     letter-spacing ESPACEMENT DES LETTRES (en px);
     }

     

    A la place du #titre_header a pour le header tu peux mettre une infinité de balise comme par exemple: .module_titre_contenu (titre article) ; .article_info (tout est dit) ; .module_menu_contenu (module des menus) ; #footer a (texte du pied de page) ; etc..

     

    Pour récapituler:

    • On trouve la police sur un site de téléchargement de police
    • On la télécharge. On prends le bon fichier.
    • On la mets dans sa médiathèque eklablog.
    • On insère le code CSS. 
    • Notre police est prête d'utilisation!

     

    Voilà j'espère que tout est clair. Sinon dites le moi en commentaire. 

    J'espère que ce tuto vous a plus. 
    A très vite!

    Ella.

     

    Pin It

  • Commentaires

    1
    Dimanche 17 Juin à 01:17

    Ca marche pas, je galère tellement :/

    2
    Dimanche 17 Juin à 10:14

    Ah bon? Quelle étape ne fonctionne pas?

    3
    Dimanche 17 Juin à 10:23

    J'ai entré le code css sur mon blog, j'ai hébergé la police et elle ne s'affiche pas dans les polices du blog cry

    4
    Dimanche 17 Juin à 10:43

    Je comprends pas

    5
    Mercredi 11 Juillet à 15:16

    Je ne savais pas que l'on pouvait télécharger la police directement sur Eklablog. J'ai l'habitude de le faire avec la règle CSS @font-face. Merci pour la découverte !

    6
    Mercredi 11 Juillet à 16:41

    En fait c'est la meme méthode que tu utilises il fait mettre le code CSS.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :