Pour quoi faire ?
Les navigateurs modernes permettent l’utilisation de polices de caractères enrichies, non disponibles par défaut sur le poste des utilisateurs.
Par un coup de chance, Internet Explorer permet aussi cela (avec quelques différences de syntaxe) ce qui rend la fonctionnalité utilisable par tous les visiteurs.
Google a mis en place un répertoire de polices enrichies utilisables librement, ainsi qu’une API pour gérer les différences entre navigateur.
Ce plugin facilite complètement l’utilisation de ces polices, et prenant en charge l’insertion des directives de chargement depuis le répertoire des polices proposées par Google dans votre site.
Comment ça marche ?
Installez le plugin, et rendez-vous dans la page de configuration « Webfonts ».
La page se compose
- d’un formulaire avec un champ texte dans lequel vous allez lister les polices à charger, en indiquant une police par ligne
- d’une frame permettant de naviguer dans le répertoire des polices fournit par Google, dans lequel vous allez pouvoir faire votre choix.
Une fois vos polices choisies, enregistrez le formulaire de saisie.
Il ne vous reste plus qu’à utiliser ces polices dans votre feuille de style personalisée, avec la syntaxe suivante :
- h1,h2,h3 { font-family: 'Lobster', serif;}
Attention : remarquez que le nom de la police est indiqué entre quotes.
Dans notre cas, cela nous donne alors très simplement le résultat suivant :
Est-ce que ça marche dans tous les navigateurs ?
Oui, dans tous les navigateurs courants. La propriété CSS font-face utilisée pour gérer ces polices est en effet supportée par la plupart des navigateurs :
- Mozilla Firefox : version : 3.5+
- Apple Safari : version 3.1+
- Google Chrome : version 4.249.4+
- Opera : version 10.5+
- Microsoft Internet Explorer : version 6+
Pour plus d’information sur les différences entre navigateurs, vous pouvez vous reporter à http://code.google.com/apis/webfonts/faq.html
Attention cependant, les polices étendues ne sont pas supportées par l’iPhone, l’iPad, l’iPod, ou Android. Dans ce cas, c’est la famille de substitution suivante qui sera utilisée.
Quel impact sur la rapidité de mon site ?
L’utilisation des polices étendues implique un poids plus important de données à charger par l’internaute, lors de la première page vue :
- Si vous remplacez des images typographiques par ces polices étendues, alors lé résultat sera plutôt plus rapide.
- Mais par rapport à l’utilisation des polices habituelles, le chargement de la page sera plus long.
Il faut être conscient de ce petit désavantage, et éviter d’abuser d’un nombre de polices étendues inutilement important.
Par ailleurs, faites bien attention à n’indiquer dans la configuration que les polices que vous utilisez réellement car elles seront toutes chargées.
WebFonts
Vos commentaires
# Le 11 juillet 2011 à 08:51, par bcolo
En réponse à : Webfonts
J’ai trouvé : sous spip 2.1.10, pour accéder à la page de configuration de webfonts, il faut aller dans le menu squelettes en haut de l’admin.
Après, effectivement le champ renvoyant chez Google reste vide, mais ce n’est pas très grave : il suffit d’aller directement sur la page de Google Webfonts ici, de sélectionner ses polices et de les saisir dans le champ liste des polices. J’ai essayé sur mon site, ça marche bien.
Répondre à ce message
# Le 10 juillet 2011 à 21:09, par bcolo
En réponse à : Webfonts
Bonjour
Je suis sous spip 2.1.10, je viens d’installer webfonts car je voudrais tester ce service de Google, mais une fois le plugin installé, je ne trouve nulle part de page de configuration webfonts dans l’admin.
Pourriez-vous être plus précis sur l’endroit où se trouve cette page de configuration et comment on y accède ?
Merci d’avance.
Répondre à ce message
# Le 22 septembre 2010 à 08:32, par Philippe G.
En réponse à : Webfonts
Bonjour,
Je suis en SPIP 2.1.2, et vient juste de télécharger et installer Webfonts, mais je n’ai rien qui s’affiche dans la fenêtre permettant de naviguer dans le répertoire des polices fournit par Google, qui reste désespérément vide...
# Le 22 septembre 2010 à 09:15, par Philippe G.
En réponse à : Webfonts
Précision : ce qui précède est sous Firefox 3.6. Sous MSIE (8.0.6001), j’ai le texte suivant :
« Ce contenu ne peut pas être affiché dans un cadre
Afin d’assurer la sécurité des informations que vous saisissez dans ce site Web, l’éditeur de ce contenu n’autorise pas son affichage dans un cadre.
Essayez la chose suivante :
Ouvrez ce contenu dans une nouvelle fenêtre »
Le plugin : WebFonts 0.1.0 [40393]
Cordialement,
Philippe G.
# Le 22 septembre 2010 à 10:31, par aurelien
En réponse à : Webfonts
Pareil, rien ne s’affiche dans le cadre sous FF, chrome et Safari (OSX)
# Le 22 septembre 2010 à 12:21, par Cedric Morin
En réponse à : Webfonts
En effet, google semble renvoyer une page vide lorsque l’url est affichee par une iframe.
C’est embetant, ça.
Répondre à ce message
# Le 7 septembre 2010 à 10:04, par Regis92
En réponse à : Webfonts
Y-a-t-il moyen de créer des balises personnalisées pour chaque police afin d’utiliser distinctement ces polices dans les articles ?
MERCI D’AVANCE !
# Le 7 septembre 2010 à 11:46, par Cedric Morin
En réponse à : Webfonts
Ce n’est clairement pas l’objet de ce plugin. Qui plus est, la gestion de la charte typographique est généralement un travail séparé de l’éditorial, et donner aux rédacteurs le moyen de changer de police à tous les coins d’articles c’est la garantie de faire de très beaux sites sapins de noël.
Répondre à ce message
# Le 31 août 2010 à 12:10, par Regis92
En réponse à : Webfonts
Bonjour,
... c’est à dire où exactement SVP ?
(j’utilise le squelette sarkaspip et j’ai activé la compression des CSS)
Merci !
Répondre à ce message
# Le 10 juillet 2010 à 03:55, par André Vincent
En réponse à : Webfonts
RECTIFICATIF
Le jeu de caractères servi par défaut par Google Font Directory n’est pas MacRoman, mais ANSI (Windows-1252). C’est FontSquirrel qui utilise MacRoman par défaut dans son paquet @font-face Kits.
Répondre à ce message
# Le 2 juin 2010 à 22:42, par paolo
En réponse à : Webfonts
Je ne trouve pas d’infos sur le site de Google à propos de quelles langues sont couvertes par ces polices. Elles ont tous les caractères pour les langues est-européennes ?
# Le 6 juin 2010 à 14:59, par sholby
En réponse à : Webfonts
Sur le répertoire des polices, tu peux cliquer sur chacune de celles qui sont disponibles pour obtenir davantage d’infos. De là, l’onglet du milieu, « Character set » montre tous les caractères disponibles. Par exemple : http://code.google.com/webfonts/family?family=Cantarell#set
# Le 2 juillet 2010 à 08:46, par André Vincent
En réponse à : Webfonts
Afin de réduire la taille des téléchargements, toutes les polices du service Google Font Directory ont été tronquées pour ne supporter que les langues de l’Europe de l’ouest (plus précisément : MacRoman - Western Languages). Même les polices Droid, développées pour Android par Google qui comportent dans leurs versions originales plus de 587 glyphes, incluant presque toutes les langues ouest-européennes ont ainsi été tronquées.
Par ailleurs, les services TypeKit (version gratuite) et FontSquirrel permettent de choisir parmi les jeux de glyphes disponibles, pour une police donnée, les langues que l’on désire supporter.
Le service Google Font Directory étant relativement récent, il est à prévoir qu’ils ne tarderont pas à offrir sensiblement les mêmes options bientôt, pour de plus en plus de polices libres de qualité. Sinon d’autres le feront. À suivre...
Répondre à ce message
# Le 2 juillet 2010 à 08:00, par André Vincent
En réponse à : Webfonts
Le système iOS 4 des iMachin semble maintenant en mesure de supporter @font-face . Le présent plugin supporte donc iPad, iPhone et iPod Touch. Pour Android, ça devrait suivre bientôt.
Il serait par ailleurs intéressant que le fichier webfonts_pipeline.php supporte aussi TypeKit comme le prévoit l’API de Google, du moins, en option.
Répondre à ce message