Google propose Google Fonts : des polices d’écritures à utiliser pour votre site web, dans le CSS.

Seulement ils sont bien malin : le code CSS prêt-à-utiliser que vous devez mettre dans votre code contient le lien du fichier de la police d’écriture qui se trouve sur leur serveur. Voilà la marche à suivre pour récupérer manuellement le fichier et le placer en local, chez vous.

Je vais faire l’exemple avec une police d’écriture au hasard.

Rendez-vous sur google.com/fonts. Choisissez la police que vous voulez, puis cliquez sur « quick-use » :

download font step 1
Descendez un peu en bas dans la page et récupérez le lien vers le fichier CSS :

download font step 2
Ouvrez ce lien dans votre navigateur.
Vous pouvez déjà copier tout le code dans votre CSS. Il suffit juste de récupérer le lien vers le fichier de la police (fichier .woff).

download font step 3
Téléchargez le fichier .woff et enregistrez le dans votre projet.

download font step 4
Il ne reste alors plus qu’à changer le lien de la police dans le code CSS, pour qu’il utilise le fichier .woff local et pas via le site de Google.

Voilà, c’est tout.

L’avantage d’avoir le fichier de la police chez soi :
  • Pas de traçage possible par Google
  • Votre site reste indépendant : si Google ferme son service (il le fera un jour) votre CSS fonctionnera quand même.

Désavantages :
  • Le fichier de la police sera téléchargé depuis votre site, donc consommera votre bande passante.
  • Si un autre site web quelque part utilise la même police, le navigateur le téléchargera deux fois, alors qu’il ne le fait qu’une seule fois si les deux utilisent le service de Google.

Cette astuce s’inscrit dans ma politique d’un site 100% indépendant sur le plan technique. Il n’y a aucun fichier (image, script…) utilisé dans mes pages qui soit hébergé ailleurs que chez moi.

19 commentaires

gravatar
qwerty a dit :

Même si je connaissais déjà l'astuce, merci de la diffuser ! Marre des Google font and co !

gravatar
piero-la-lune a dit :

Ou alors : ajouter la police à sa collection, puis télécharger la collection. Cependant, cela ne donne que le fichier .ttf (il me semblait que cela donnait tous les formats possibles avant...).

gravatar
Guenhwyvar a dit :

Ils ont pas un truc dans leur license quelque part qui précise qu'on peut utiliser la police depuis leur serveur mais pas l'héberger soi-même ?

gravatar
KiwiiCorporation a dit :

C'est ce que j'ai fait sur mon site, j'ai passé l'ensemble des scripts et autres modules sur mon propre serveur.

gravatar
galex-713 a dit :

Quoi tout le monde fait pas ce genre de truc automatiquement ?

gravatar
legaub a dit :

J'avais cherché à le faire, sans succès.

Merci beaucoup.

gravatar
Walane a dit :

J'ai fait la même manip pour l'avoir sur mon site.
Avec les paranos qui visitent mon blog ça m'étonnerait pas qu'il bloquent les serveurs de Google :-D (joke)

gravatar
Adren a dit :

très bon article qui montre bien les risques à utiliser un service centralisé par une boite qui récupère de + en + de méta-données des utilisateurs (i.e. produits)

sinon, je vois éventuellement encore un autre petit avantage à utiliser la police sur les serveurs de Google : lors de MAJ, c'est la dernière version qui est automatiquement chargée
une parade à ça serait de vérifier à intervalles réguliers qu'elle n'a pas changée et la MAJ aussi sur sa machine
et peut-être aura t-on un jour un équivalent au paquet msttcorefonts (msttgooglefonts ?) pour les distrib Linux permettant d'avoir toutes les polices de caractères Google en local

par contre, pour éviter ces avantages/inconvénients et rendre le + possible tout le monde heureux, une solution serait d'avoir la police en local et que le CSS la charge sur son serveur seulement si le navigateur qui effectue la visite a bien l'indicateur anti-pistage (no tracking), sinon c'est récupérer sur le site de Google
après c'est juste une question d'éduquer ceux qui le souhaite afin qu'ils utilisent les outils adéquat : Adblock+, ghostery, no tracking, etc.

gravatar
Le Hollandais Volant a dit :

@Adren : la dernière version… Pour une police d’écriture…
Justement, ça peut-être embêtant : si on utilise une police avec certains caractères, et qu’un caractère disparaît ou change de place d’une version à l’autre de la police, ça va rendre bugué le site.

D’autant que pour une fonte, je doute que les mises à jours soient critiques au niveau de la sécurité.

Mais dans le fond, oui c’est inconvénient.

gravatar
Xavlepolak a dit :

Elles sont si indispensables les fonts google ? le mieux c'est de prendre des fonts libres de droits, non propriétaires ...

gravatar
Hegurka a dit :

@Le Hollandais Volant : As-tu un outil simple et efficace pour convertir de .woff en .ttf par hasard ? Ca permettrait d'utiliser les polices récupérées de Google sur son PC, sur Libre office par exemple ou dans des mails, etc.

gravatar
piero-la-lune a dit :

@Hegurka : Lis mon commentaire ci-dessus (#2)

gravatar
Lea de bricolea a dit :

Pas sur que google ferme google fonts, c'est quand même un excellent "troyen" pour mesurer l'audience d'un site qui n'aurai pas analytics par exemple...

gravatar
clem a dit :

sinon y'a un bouton download (icone ⇩) dans le coin supérieur droite.

Elle est plutôt discrète car google veux probablement insister a utiliser les fonts sur leur serveur mais ca fonctione tres bien.


petit tuto :
- on sélection les font a téléchargé (bouton "add to collection")
- on clic sur l'icone download (⇩)
- on clic sur "Download the font families in your Collection as a .zip file"
- on obtient un zip avec les fonts au format .ttf

gravatar
Aline a dit :

Merci pour l'article et Merci à clem

gravatar
Sick a dit :
Je sais comment obtenir tous les fonts.
Il suffit d'aller sur github.com/google/fonts dans la barre URL et ajouter /tarball/master.

Les commentaires sont fermés pour cet article