![[CSS] Importer des polices avec Google Font. Dy0i2r](https://2img.net/h/i61.tinypic.com/dy0i2r.png)
Accueil
Sujet: [CSS] Importer des polices avec Google Font. ![[CSS] Importer des polices avec Google Font. Icon_minitime](https://2img.net/i/fa/icon_minitime.gif){kind=icon}
Mer 2 Jan - 12:00Introduction.
Vous ne supportez plus les polices standards proposées par le BBCode ? Vous voulez une touche d’originalité ? Avoir des titres avec du pep's pour vos posts ? Alors n'attendez plus, une nouvelle fois, Google est là pour vous ! Le géant du web propose un service gratuit qui permet d'intégrer un choix varié de polices exotiques directement dans son CSS via une URL. Cette technique propose de nombreux avantages pour les webdesigners et les graphistes en herbe :
- Google Font héberge la police, pour un site web ceci est bien pratique, une police pesant entre 50 et 300ko. Le manque de standard exige également différents formats (.eot, .ttf, .otf etc...) en fonction du navigateur. Cela ne représente plus un problème.
- Comme sous-entendus précédent, la police chargée sera adaptée à tout les navigateurs supportant CSS3.
- La police s'affichera en règle générale correctement sur tout les navigateurs.
Alors si vous trouvez sur le dépôt Google une police qui vous fait envie, n'hésitez plus ! Il y a en tout 631 polices de proposées, sans compter les déclinaisons possibles. Cela laisse un large choix pour l'édition de vos posts ou de vos pages webs. (;
Importer des polices avec Google Font .
Il est particulièrement simple d'importer les polices du dépôt avec la Google Font API. Il suffit d'ajouter une feuille de style CSS contenant le lien vers votre police à votre code HTML puis de l'utiliser.
Exemple avec Medusa One:
- Code:
- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Medula One"/>
<h1 style="font-family:Medula One, Georgia, sans-serif; font-size:1.7em;">Mon titre en Medula One.</h1>
Google héberge la feuille de style, ainsi que la police et effectue toutes les instructions CSS nécessaires au bon affichage de la police. Il sélectionne le format de la police en fonction du navigateur de l'utilisateur et la renvoie dans un fichier CSS composé d'un simple @font-face !
En cas d'erreur(s) !
Il est nécessaire de toujours utiliser une police alternative standard avec la propriété CSS font-family ! Si un dysfonctionnement empêche votre premier choix de police de fonctionner, votre site web pourra ainsi utiliser une seconde police. Cette dernière vous semblera peut-être moins esthétique mais garantira l'affichage de votre contenu ! Ainsi il est toujours conseiller d'utiliser au moins la police "serif" ou "sans-serif" après vos propres polices :
- Code:
- font-family: Medusa One, sans-serif;
Il est ainsi possible d'ajouter autant de polices que vous le désirez. Si la première n'est pas disponible, il passera à la suivante et ainsi de suite.
