Pour utiliser cette bibliothèque, il suffit d’appeler une feuille de style de la forme suivante :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Et pour que tous vos h1 utilise cette typo « Tangerine » :

h1 {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

A l’heure actuel, la bibliothèque javascript Google Font API comprend 18 typos.

A mon avis, déclarer ces typos en CSS3 est préférable à l’utilisation de javascript mais bon…

Liens :

• Google Font API
• Google Font Directory
• Font previewer

Plusieurs réglages permettent d’affiner le résultat :

• couleurs,
• taille,
• espacement des caractères
• …

Celui-ci est affiché sur 3 colonnes (pratique pour comparer plusieurs configurations ).

Lorsque le résultat vous convient, vous pouvez télécharger la feuille de style CSS correspondante.

Lien :

• Typetester

Si vous vous posez ces questions, le mieux pour y répondre c’est de les comparer !

C’est justement ce que propose le site TypeChart.

Sans grande prétention à mon avis, le site TypeChart va simplement vous afficher un texte selon différents critères de police :

• Le type de police
  • Arial / Helvetica
  • Cambria
  • Georgia
  • Lucida Grande
  • Lucida Sans Unicode
  • Trebuchet MS
  • Verdana
• la taille de police
  • Small
  • Medium / Body
  • Large / Heading
  • Extra Large
• L’emphase utilisée
  • Normal
  • gras
  • Italique
  • Lettres capitales

Ça peut être effectivement un site utile au début de la phase de création graphique d’un site internet.

Lien :

• TypeChart

Facile, utiliser une typo qui vous ressemble : votre propre écriture !

C’est ce que propose gratuitement le site FontCapture.

Comment ?

Il vous faut simplement récupérer un fichier PDF ou il va vous être demandé de reproduire à la main les caractères présents sur le document (en faisant attention aux majuscule/minuscules).

Une fois ce travail effectué, vous scannez le document au format PNG ou JPG et vous envoyez via le formulaire d’upload du site.

Et hop, vous récupérez une police compatible Windows/Mac !

Lien :

• fontcapture.com

Si vous vous êtes posées cette question alors WhatTheFont est fait pour vous

Très simple d’utilisation, vous n’avez que 2 étapes à suivre avant l’affichage des résultats.

Uploader une image (jusqu’à 2Mo), ici j’ai simplement envoyé mon header

Selection des caractères reconnus :

Divers caractères sont détectés, vous pouvez alors les modifier si le site s’est trompé :

Résultats, plusieurs possibilités de police sont proposées :

Bon là, ça n’a pas marché (c’était « Myriad Pro » la bonne réponse…), mais l’idée peut en aider quelques uns !

Lien :

• WhatTheFont sur new.myfonts.com

Car si en théorie il n’a à aucune limitation dans le choix de la police, en pratique, cela dépend du poste client. En effet, les polices dites « standards« , autrement dit que l’on retrouvera sur la majorité des postes clients, se comptent sur les doigts d’une main (ok une main pleines de doigts) :

• Arial,
• Georgia,
• Helvetica,
• Sans-serif,
• Times ou Times New Roman,
• Trebuchet MS
• Verdana,
• …

Pour contourner ce problème, il existe diverses solutions :

• faire des images,
• utiliser sIFR.

sIFR ?

Une combinaison de javascript et de flash qui permet de générer un swf intégrant votre nouvelle police à la place du texte.

Comment mettre en place sIFR ?

1. Intégrer le javascript sifr.js
2. Déclarer votre nouvelle police et le fichier swf associé
3. Activer votre nouvelle police
4. Déclarer quel élément vous remplacer.

Ce qui donne :

<script src="sifr.js" type="text/javascript"></script>
<script type="text/javascript">
var ma_nouvelle_police = {
    src: 'ma_nouvelle_police.swf'
};
sIFR.activate(ma_nouvelle_police);
sIFR.replace(ma_nouvelle_police, {
  selector: 'h1'
});
</script>

Liens :

• Site officiel
• La version 3 alpha

En attendant que les futurs navigateurs web permettent l’installation de polices, cela semble être le meilleur compromis.

D’autres solutions permettant d’intégrer des polices existent :

• FLIR (PHP + GD)
• typeface (Javascript)