Polices Google W3.CSS
Avec W3.CSS, il est extrêmement facile d'ajouter de nouvelles polices.
- Très facile à utiliser (uniquement CSS et HTML)
- Utilisation illimitée de bibliothèques de polices externes (comme Google Fonts)
- Fonctionne dans tous les navigateurs modernes
C'est Roboto
C'est Sofia
Sofia en feu
Faire le Web !
Faire le Web !
Faire le Web !
Faire le Web !
Faire le Web !
Utilisation des polices Google
Les polices Google sont gratuites et proposent plus de 1 000 polices.
Dans l'en-tête de votre page Web, créez un lien vers une police Google :
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Ajoutez ensuite le CSS indiquant où l'utiliser :
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Un autre exemple
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Créer une classe de police
Dans l'en-tête de votre page Web, créez un lien vers une police Google :
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Créez ensuite une classe de police :
Exemple
.w3-sofia {
font-family: Sofia, cursive;
}
Dans votre page Web, utilisez la classe de police :
Exemple
<p class="w3-sofia">Making the Web!</p>
Faire le Web !
Exemple
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Faire le Web !
Exemple
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Faire le Web !
Exemple
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Faire le Web !
Exemple
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Faire le Web !