Read more

"/>
Comment intégrer Google Fonts localement et conforme DSGVO dans WordPress (et quels sont les inconvénients)

Comment intégrer Google Fonts localement et conforme DSGVO dans WordPress (et quels sont les inconvénients)

Si vous avez des polices Google incluses par défaut, c'est-à-dire via des serveurs Google, des données telles que l'adresse IP, les données du client (navigateur, système d'exploitation) ou referrer (la page de référence) enregistrée par Google.

fort propre information Google Fonts ne stocke pas de cookies et n'associe pas les données à des comptes Google. Mais avec Google Fonts sur un site Web sur deux, il est possible que Google puisse suivre l'activité des utilisateurs sur le net. Cela peut constituer un risque juridique dans le cadre du GDPR.

Je voudrais vous montrer, étape par étape, comment intégrer Google Fonts localement dans WordPress, c'est-à-dire charger à partir de votre propre serveur au lieu des serveurs Google.

avertissement: Cet article de blog n'est pas un conseil juridique! Dans le cadre de mon travail en tant que blogueur et fournisseur de services WordPress, j'ai longuement traité des réglementations applicables en matière de protection des données et du règlement général, mais je ne suis ni avocat ni expert en protection de la vie privée. En conséquence, je ne peux assumer aucune responsabilité quant à l'exhaustivité, la rapidité et l'exactitude du contenu que je fournis.

Inconvénients de l'inclusion locale des polices Google

Cependant, les polices Google sur votre propre serveur présentent également certains inconvénients, que je voudrais également mentionner brièvement:

  1. Plus de charge sur votre propre serveur
  2. Temps de chargement plus long (les polices chargées via le serveur Google se trouvent déjà dans la mémoire cache du navigateur de nombreux utilisateurs, sont chargées via un CDN et sont techniquement très bien optimisées)
  3. Occurrence de Flash de texte sans style (seule la police de secours est affichée jusqu'au chargement de la police Google)
  4. Temps passé ou coûts supplémentaires (par exemple lors du recours à un fournisseur de services) via l'intégration locale
  5. si nécessaire, installation d'un plugin supplémentaire

Si vous me le demandez, l'intérêt légitime (conformément à l'article 6, paragraphe 1, point f), du GDPR) d'obtenir des polices de Google auprès de Google peut souvent être justifié. Je ne pense donc pas qu'il soit nécessaire d'inclure Google Fonts localement.

1. Déterminez les polices Google que vous utilisez.

Pour intégrer Google Fonts localement, il est d'abord nécessaire de déterminer quelles sont les polices Google réellement utilisées sur votre site Web.

1.1 options de thème

Le premier indice concerne les options de thème. Vous le trouverez probablement à l'un de ces endroits dans la section admin de WordPress:

  • dans un élément de menu séparé
  • dans une sous-section de conception ou paramètres
  • dessous Design> Personnalisateur

Une fois là-bas, vous recherchez un sous-point comme Typographie, typographie, polices de caractères ou polices, Voici comment le z. Par exemple, pour mon thème GeneratePress:

Définir les polices Google dans le Customizer

Une fois que vous avez trouvé les polices appropriées, ouvrez un éditeur de texte et notez quelles polices Google utiliseront exactement et en quelle épaisseur (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, gras). etc.).

1.2 plugins ou code externe

Dans certains cas, les polices de Google sont également intégrées volontairement ou involontairement via des plugins ou du code externe. C'est le cas, par exemple:

Sur Google Maps, reCAPTCHA et d’autres ressources externes sur iframes Souvent, vous n'aurez pas d'autre choix que de les supprimer complètement pour empêcher le chargement de Google Fonts sur votre site Web.

1.3 Console développeur

Enfin, vous devez rechercher dans la console du développeur de votre navigateur les polices Google chargées. Cliquez sur votre propre site Web sur le bouton droit de la souris puis sur Examiner l'élément,

La console devrait maintenant s'ouvrir du côté droit ou en dessous. Là vous cliquez sur l'onglet Sources. Vous pouvez maintenant voir toutes les sources utilisées par votre site Web pour charger des ressources.

Les polices de Google sont dissimulées sous les points suivants:

  • fonts.googleapis.com
  • fonts.gstatic.com

Cet exemple utilise les polices Google Rufina et Source Sans Pro (regroupées dans une requête de serveur unique). Sur le côté droit, vous pouvez voir quelles tailles de police et quels codes de caractères sont utilisés exactement:

Polices Google dans la console du développeur

2. Rendez-le facile!

Pour certains thèmes, vous pouvez définir des options pour télécharger les polices Google localement (ou enregistrer vous-même les autres étapes de ce guide).

C'est le cas, par exemple:

Assurez-vous de consulter le changelog de votre thème! Certains développeurs DSGVO ont apporté des modifications à leurs thèmes et publié des mises à jour.

2.1 Utiliser les polices système ou Web Safe

Sur bon nombre de mes sites Web, y compris Blogmojo, j'ai décidé d'utiliser Google Fonts par le biais de polices système (notamment les polices Apple Fonts). San Francisco Je pense très chic!) Ou Polices Web Safe (comme Arial).

Cela économise non seulement le travail, mais assure également un meilleur temps de chargement (et une mise en page plus agréable). En ce qui concerne la conception, cela n’a pas toujours de sens.

Caractères sans empattement, tels que B. Open Sans ou Roboto, peut être très bien remplacé à mon avis. Je me passerais des polices empattées. Times New Roman et Georgia z. B. sont des polices horribles qui n'appartiennent pas au Web.

3. Télécharger des polices

Une fois que vous avez identifié les polices Google dont vous avez besoin, vous devez les télécharger.

Le moyen le plus simple est la Google Webfonts Helperqui vous fournit également le code CSS dont vous avez besoin à l'étape 4:

Google Webfonts Helper

Tout d'abord, sélectionnez la police appropriée sur le côté gauche. Ensuite, vous devez configurer ceci pour le moment.

  1. à sélectionner les jeux de caractères (Charset = encodage de caractères) vous pouvez tout laisser tel quel. Sauf si votre blog est en grec (alors vous devez y aller en plus grec sélectionnez) ou dans une langue d’Europe de l’Est (par exemple, le polonais, le tchèque ou le roumain).
  2. à sélectionner des styles Choisissez-vous les points forts que vous utilisez sur votre blog? Dans tous les cas, vous devez prendre 700, ce qui correspond à gras. Si vous ne le faites pas, alors gras sera effiloché.
  3. à Copier CSS choisissez-vous Meilleur support off (par défaut) et copiez le code CSS (de préférence dans un simple éditeur de texte).
  4. Maintenant, vous pouvez télécharger un package de polices (au format ZIP)!

Si vous utilisez plusieurs polices Google, répétez simplement les étapes et copiez le code CSS de la deuxième ou de la troisième police parmi les premières.

4. Télécharger sur le serveur FTP

Après avoir téléchargé et décompressé votre paquet de polices, vous devez télécharger les fichiers de polices sur votre serveur FTP.

Pour ce faire, ouvrez FileZilla (ou un programme FTP de votre choix) et accédez au répertoire racine de votre domaine (où se trouve WordPress).

Là vous créez un dossier, qui polices signifie et copiez-y les polices téléchargées. Le tout devrait ressembler à ceci:

Télécharger des polices Google sur un serveur FTP

5. Insérer le code CSS

Pour que les navigateurs sachent où sont vos fichiers de polices téléchargés, vous devez leur indiquer via CSS.

Pour ce faire, vous copiez le code CSS que vous avez mis en cache à l’étape 3 dans l’éditeur de texte dans style.cssFichier de votre thème enfant. Cela ressemble à ceci:

Google Fonts CSS dans le thème de l'enfant

Si vous utilisez plusieurs polices, tailles de polices et / ou encodages de caractères différents, vous devez insérer les sections individuelles du code:

CSS de deux polices Google dans le thème de l'enfant

Astuce: Si vous n'avez pas de thème enfant, vous le trouverez chez Webtimiser un bon guide pour en créer un. Jetez un coup d’œil à la documentation de votre thème, il peut y avoir des informations à ce sujet ou même des thèmes enfants clé en main.

6. Supprimer les polices Google

Il ne vous reste plus qu'à arrêter de vous connecter aux serveurs de Google.

Le moyen le plus simple est par plugin. Donc, vous évitez de jouer avec le code de votre thème (avec certains thèmes, il n'est pas facile de trouver leur origine).

6.1 Autoptimize

Tout d'abord, je voudrais Autoptimize essayez, qui est de toute façon un plugin très utile, d’améliorer votre temps de chargement.

Les polices de Google sont là Paramètres> Optimisation automatique> Outils> Google Fonts Retirer:

Supprimer les polices Google avec Autoptimize

Et pendant que vous y êtes, vous pouvez le vérifier Supprimer les émoticônes définir. Deux oiseaux avec une pierre (et votre site Web charge à nouveau quelques millisecondes plus rapidement)!

6.2 Supprimer les références de polices Google

Pour certains thèmes, les polices sont très profondément programmées dans le système. Malheureusement, la suppression de Google Fonts avec Autoptimize ne fonctionne pas toujours.

Remède le plugin Supprimer les références de polices Googlequi peut supprimer les polices Google dans 99% des cas.

Ne soyez pas rebutés par le fait qu'il n'a pas été mis à jour depuis 2 ans. Je l'ai testé sur de nombreuses installations WordPress différentes et je n'ai rencontré aucun problème jusqu'à présent.

7. Vérifiez le résultat

Une fois tout le travail accompli, il ne vous reste plus qu'à vérifier si vos polices locales se chargent correctement et si vous vous connectez toujours aux serveurs Google.

Pour ce faire, commencez par supprimer le cache de votre plug-in de mise en cache et Autoptimize, ainsi que les fichiers du cache de votre navigateur.

Maintenant, vous regardez votre site Web (mieux déconnecté) dans les outils de développement.

Dirigeant SEO SEA Expertise

Si vous avez des craintes avant de vous lancer dans un projet de communication ou de marketing digitale ou si vous vous posez encore beaucoup de questions sur la meilleure manière de procéder, contactez-moi. Je serai ravi de répondre à vos questions.