*
*
nouveaux caractères pour nos sites web avec fonts.googleapis
http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Oswald
suite a un regard poussé sur un site de chez moi au Grau http://www.espacejet.com/index.html j'ai vue cette ligne de code :
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Oswald' rel='stylesheet' type='text/css' />
http://youtu.be/3CDGhVhrSr0
http://youtu.be/3CDGhVhrSr0
ce qui m'embete c'est la non compatibilite avec certains supports mobiles comme l’iPhone, l’iPad, ou l’Android ... ca sert a quoi si c'est pas compatible ? c'est etonnant ....
je met la copie de l'explication bien faite de Emeline Bulcourt que je vais étudier merci a toi ...
Tres longtemps, l’utilisation de polices sur le web était restreinte aux quelques Arial, Geneva, Helvetica, Georgia, Times New Roman, et autres polices queque tous le monde connait bien, tant la liste était courte. Une alternative récente Google Font API.
C'est quoi Google Font API
avec cette nouvelle application, Google permet d'avoir un catalogue de polices libres de droits, répertoriées dans le Google Font Directory. L’utilisation des polices dans une pages web est assez simple , et surtout compatible avec les navigateurs (sauf ... sur certains supports mobiles comme l’iPhone, l’iPad, ou l’Android). Chaque police supporte également le CSS3, iavec des effets d’ombres portées, dégradés, rotations, etc.
Elément important également, le déploiement de ces polices sur votre site web n’aura pas d’impact négatif sur le référencement et l’accessibilité de vos pages, puisque le code html est conservé. Pas de conversion en images, ou même en objets flash comme cela peut se faire avec d’autres « outils ».
Utilisation et fonctionnement de l’API Google Font
L’utilisation de la Google Font Api ne requiert pas beaucoup plus d’efforts que l’utilisation d’une police web classique. Pas besoin donc d’être un grand développeur, il vous suffit simplement d’inclure au sein de votre code html l’appel d’une feuille de style dédiée à la typographie choisie.
1. Choisissons l’exemple de la police Droid Sans ; vous utiliserez alors cette syntaxe :
2. Attribuez ensuite la police souhaitée à votre élément html grâce à l’attribut font-family dans votre feuille de style :
h1 {font-family: 'Droid Sans', serif;} |
3. Par précaution, prenez soin d’indiquer une famille générique de police (ici, serif) au cas où la police mise en place par Google ne serait pas interprétée.
Afin de faciliter la mise en place de votre police, Google met à votre disposition un outil de prévisualisation qui s’avèrera très pratique pour gagner du temps et éviter les fautes de frappe !
Exemple d’utilisation de la Google Font API
Petit exemple qui vous permettra de visualiser concrètement l’utilisation de l’API Google Font et d’expérimenter les différentes possibilités qu’offre cette API.
Copiez ce code dans un document html :
<html><head><link href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC" rel="stylesheet" type="text/css" ><style>h1 {font-family: 'Lobster', serif;font-size: 48px;text-shadow : 4px 4px 4px #aaa;}</style></head><body><h1>ikomeo Design</h1></body></html> |
Affichez le résultat dans votre navigateur, et profitez-en également pour tester le rendu sur différents browsers.
Utilisation de l'API Google Font
Syntaxes et raccourcis
Plusieurs raccourcis vous permettent de spécifier directement dans l’url appelant la feuille de styles certaines spécificités :
- Pour appeler plusieurs polices à la fois dans votre site, il vous suffit d’indiquer sur la même url les noms de chaque police, séparés par le caractère « | » :
Ex : http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
- Vous pouvez également indiquer directement dans l’url le style de la police, en indiquant le nom entier (bold, italic, bold italic) ou son abbréviation (b pour bold, i pour italic, et bi pour bold italic)
Ex : http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
L’arrivée de l’API Google Font devrait offrir de belles possibilités quant à l’utilisation de la typographie sur le web, utilisation bien trop longtemps bridée. L’enrichissement plus que probable du catalogue de polices de la Google Font API devrait aussi fortement y contribuer !
- Google Font Directory
- Google Font Preview
- nouveaux caractères pour nos sites web avec fonts.googleapis
*
