• Ajouter une Police Google Web Fonts

    C'est en partant d'un post de Pipiou sur le forum officiel qu'est venu ce tuto. Jusqu'ici, je déconseillais de mettre des polices que j'appelais "exotiques" sur son blog car d'une part il faut que votre visiteur voie la même chose que vous et surtout qu'il n'ait pas à télécharger une police.

    Il existe une possibilité assez simple à mettre en oeuvre pour utiliser une police différente à l'aide de Google Webfonts.

    L'exemple est basé ici sur la police Condiment

    Choix de la police

    La première des choses est de choisir sa (ou ses) police(s)  sur le site Google Web Fonts

    Ajouter une Police Google Web Fonts

     Sur cette page, il vous suffit de sélectionner votre police et de cliquer sur le bouton Add to Collection. Vous pouvez ainsi ajouter plusieurs polices. Mais attention, plus vous en ajouterez et plus le temps de chargement de vos pages sera allongé.

    Lorsque votre choix est terminé, vous cliquez sur le bouton Use en bas de page.

     

     

     

     

     

    Obtension du code

    Ajouter une Police Google Web Fonts

    Vous arrivez sur la page ci-contre (à droite)

    Vous cliquez sur l'onglet Javascript et vous copiez le code fourni. S'agissant de javascript, je rappelle que celui-ci doit être activé sur votre compte Eklablog. (Faire la demande au support)

     

     

     

     

     

     

     

    Mise en place dans votre blog

    Ajouter une Police Google Web FontsPour que cela fonctionne correctement à l'endroit ou vous souhaitez la police, il faut que le script copié ci-avant soit lu. Le plus simple est donc de créer un module HTML  (Apparence/Ajouter un module/Module simple)

    Vous éditez ce module et cliquez sur le bouton HTML de la fenêtre d'édition (mode normal ou expert) et vous collez le code copié ci-avant. Puis vous cliquez sur Mettre à jour pour valider votre fenêtre. (Voir image ci-contre)

     

     

    Le code CSS

    Il ne vous reste plus qu'à éditer votre code CSS (Apparence/Modifier le thème/Ajouter du CSS) en fonction du type de texte auquel vous voulez que cette police s'applique.

    Exempleid ou classeCode CSS
    Titres h1 h1 h1
    {font-family: 'Condiment', cursive;
    font-size:25px;} 
    Classe personnelle .mapolicespeciale .mapolicespeciale
    {font-family: 'Condiment', cursive;
    font-size:25px;} 
    Titre header #titre_header a #titre_header a
    {font-family: 'Condiment', cursive;
    font-size:75px;}