Vous aimerez savoir comment faire pour utiliser une police sympa que le site Google Web Fonts vous propose ? Je vais vous expliquer comment procéder. Cette astuce est destinée pour les utilisations les pages HTML et CSS.

POUR LES FONDATEURS

♦ Rendez-vous sur le site de Google Web Fonts et choisissez une police qui vous plait
♦ Pour donner un exemple, je vais prendre la police “Englebert”.

♦ Cliquez ensuite sur le petit bouton “Quick Use” style.css de votre site.

♦ Vous arrivez sur une page avec plusieurs étapes (Ne quittez pas cette page car on va en avoir besoin plus tard), l’étape qui nous intéresse est la troisième “3. Add this code to your website:”. Copiez le code qui se trouve en mode “Standard” qui est :

<link href=’http://fonts.googleapis.com/css?family=Englebert’ rel=’stylesheet’ type=’text/css’>

♦ Rendez-vous sur votre page HTML où vous allez l’ouvrir avec bloc note, Kompozer/NVU ou encore Dreamweaver. (en passant en mode source ou code pour les logiciels de programmation)
♦ Collez le code de la troisième étape après la balise :

<head>

♦ Voici le rendu :

♦ Vous pouvez en rajouter plusieurs ! Il vous suffira de les placer l’un en dessous des autres.

♦ Puis vous pouvez sauvegarder et uploader votre fichier sur votre FTP.

♦ Maintenant, nous allons l’utiliser, revenez sur la page de votre police sur Google Web Fonts à la quatrième étape “4. Integrate the fonts into your CSS:”.

♦ Récupérez le code :

font-family: ‘Englebert’, sans-serif;

♦ Vous pouvez maintenant le coller dans votre feuille de style CSS :

.nomdelaclass {
font-family: ‘Englebert’, sans-serif;
}

 

Exemple

.h2 {
font-family: ‘Englebert’, sans-serif;
}

♦ Où dans votre code HTML dans une balise div ou span où vous voulez:

<span style=”font-family: ‘Englebert’, sans-serif;”>VOTRE TEXTE</span>

ou
<div style=”font-family: ‘Englebert’, sans-serif;”>VOTRE TEXTE</div>

♦ Et c’est terminé !

© By Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *