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 » :
Descendez un peu en bas dans la page et récupérez le lien vers le fichier CSS :
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).
Téléchargez le fichier .woff et enregistrez le dans votre projet.
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.