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 *