Google Fonts : l'utiliser en préservant l'anonymat des visiteurs
Google Fonts est une bibliothèque de polices de caractères gratuite. Il s'agit d'une vaste collection de polices qui peuvent être utilisées dans des sites web et d'autres applications.
Une police peut être installée soit à distance, en se connectant à un serveur externe, soit localement, en ajoutant les fichiers sur votre serveur.
Que s'est-il passé en Europe ?
En Allemagne, le tribunal de Munich a condamné un site web à payer une amende de 100 euros pour avoir violé la vie privée de ses utilisateurs. Nous pouvons également lire la sentence dans la langue d'origine.
En résumé, le site web chargeait les polices en utilisant le service de Google à distance: les utilisateurs, sans le savoir, voyaient leur adresse IP envoyée aux serveurs américains de Google, configurant ainsi un transfert de données en dehors de l'Europe.
La solution la plus appropriée pour éviter ce type de problème est d'utiliser les polices localement, sans se connecter à un serveur externe.
Comment la violation du GDPR se produit-elle avec l'utilisation des polices Google à distance ?
Voici le code qui charge la police Open Sans via le service Google:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"> Lorsque l'utilisateur se connecte à un site web configuré de cette manière, il envoie une requête de son navigateur aux serveurs fonts.googleapis.com et fonts.gstatic.com, afin d'obtenir les polices nécessaires à l'affichage de la page.
Pour cette raison, les serveurs de Google reçoivent l'adresse IP de l'utilisateur sans son consentement.
Comment utiliser les polices Google en conformité avec le GDPR ?
Une solution comme la suivante permet de faire la même opération mais sans envoyer les données à Google:
<link as="style" href="/css/lexend.css" rel="preload"/> <link href="/css/lexend.css" rel="stylesheet" />Dans ce cas, le jeu de caractères est chargé à l'aide de fichiers téléchargés localement sur le serveur. Le fichier css contient les informations que le navigateur utilisera pour charger les polices dans la page web :
@font-face { font-family : 'OpenSans' ; src : url('OpenSans.ttf') format('truetype') ; font-weight : normal ; font-style : normal ; } @font-face { font-family : 'OpenSansBold' ; src : url('OpenSansBold.ttf') format('truetype') ; font-weight : normal ; font-style : normal ; }En supprimant la connexion au serveur Google, nous évitons que l'adresse IP de l'utilisateur ne soit envoyée hors de notre contrôle.
Comment télécharger une police ?
Téléchargeons OpenSans à partir de Google Fonts, extrayons l'archive ZIP et téléchargeons les fichiers .ttf dans un dossier sur notre serveur. Il peut y avoir d'autres fichiers comme .otf, .woff, .woff2, .eot ou similaires.
Nous pouvons également utiliser d'autres services tels que : Fontsquirrel, Dafont, 1001FreeFonts, ou des services similaires.
Il est particulièrement important de prêter attention à la licence. Presque personne ne se plaindra de la manière dont nous utilisons la police, mais il est bon de vérifier que l'utilisation respecte les dispositions des créateurs du jeu de caractères. Il est parfois possible de télécharger gratuitement des familles de polices qui, en réalité, sont destinées à une utilisation libre dans le cadre de projets personnels, et non à des fins commerciales, comme dans le cas d'applications payantes ou de produits physiques sur le marché.
Suivez-nous sur Facebook pour recevoir toutes nos mises à jour !