L'Education numérique avec Tice-Education

  • word    
  • writer
  •   excel  
  • calc
  • powerpoint
  • impress
  • chrome
  • firefox
  • safari
  • ie-10-logo
  • ipad 
  • el capitan logo
  • macosx
  • Windows 10
  • linux
  • nexus4
  • android
  • tbi
  • pdf
  • archive black zip 128
  • scratch
  • langage
  • 01010101
  • scratch algo
  • sublimetext ecran
  • cardboard box blue 128
  • robots 
  • Imprimante 3D 
  • car 
  • videoprojecteur 

toutpublic  Google Web Fonts : intégrez des polices de caractères dans un site Web

googlewebfonts logo Nous savons combien il est difficile d'embellir un site avec de jolies polices sans passer par des images. L'API Google Web Fonts est une application en ligne qui permet aux développeurs d'insérer facilement dans leur site web des polices proposées à partir du catalogue "Google Web Fonts". Google Web Fonts propose plus de 270 polices de caractères via une interface permettant de visualiser rapidement les rendus des polices.


Comment ça marche ?

L'interface propose un système de recherche parmis des centaines de polices ainsi  qu'un filtre qui s'appuie sur :

  • Le type de police : avec empattement (serif) sans empattement (sans serif) manuscrites (handwritting)
  • L'épaisseur
  • Le jeu de caractère (latin ou non latin)
  • L'enrichissement (gras italique,etc...)

 On choisit ensuite une police dans la bibliothèque disponible en ligne, l'application vous retourne un code HTML et CSS qu'il faudra ensuite insérer dans sa page web (modèle, template)  afin de voir apparaître de belles polices sur vos pages web.

Principales étapes :

1) Parcourez, via les filtres décrit plus haut, la bibliothèque de polices, choisissez votre font, puis cliquez sur "Add to collection" (on peut en choisir plusieurs).

 

googlewebfonts ecran

 

 2) En cliquant sur "Review" vous avez un aperçu des polices sélectionées.

google webfonts choose

3) Cliquez ensuite sur "Use", l'application génère un code (sous trois formes différentes).  Copiez  dans la balise  <head> de votre page html (template, modèle) le code généré :

googlewebfonts import

4) Dans votre feuille CSS, ajouter le styles aux éléments auxquels vous souhaitez aplliquer cette police :

 

Exemple :
font-family: 'Salsa', cursive;
font-family: 'Amatic SC', cursive;

 

 Google vous propose aussi un aperçu de l'impact sur le temps de chargement de vos pages via un cadran :google web fonts impact

 

 

 

 

Vos pages web sont maintenant personnalisées avec de jolies polices et ne perdent rien de leur optimisation pour le Web ! 

Plus d'informations ici : http://www.google.com/webfonts

 

 

Pour écrire un commentaire, merci de se connecter :
- Les messages déplacés et les critiques non argumentées seront supprimés.
- Le langage SMS est banni et les liens commerciaux sont interdits.

L'équipe Tice-Education

Newsletter

Actualité de l'Éducation numérique
captcha 

Devenir Membre

Pour vous informer sur l'école numérique (Tice), le codage, l'algorithmique, TNI... Totalement Gratuit !

S'inscrire

REMARQUE : Ce site utilise des cookies et autres technologies similaires. En naviguant sur notre site, vous acceptez que des cookies soient utilisés pour vous proposer des contenus et services adaptés à vos centres d’intérêts.