Hébergez vos polices Google sans effort avec Laravel

Pensez à héberger vos polices Google sur votre serveur : vous gagnerez en vitesse de chargement et vous serez en règle avec le RGPD. Je vous donne ma méthode dans cet article.

Google Fonts héberge un catalogue impressionnant de polices mais s’en remettre à lui n’est pas sans risques. En hébergeant les polices sur un domaine externe les navigateurs doivent effectuer une recherche DNS supplémentaire. Cela ralentit donc le chargement initial de la page.

En outre, comme vous dirigez vos visiteurs vers les serveurs de Google deux problèmes apparaissent :

les utilisateurs soucieux de leur vie privée n’apprécieront certainement pas cette pratique
vous enfreignez le RGPD (les produits Google ne sont plus bien vus, Google Analytics en a fait les frais tout début 2022)

Vous pouvez télécharger des polices à partir de Google Fonts et les héberger vous-même, mais cela demande plus de travail que d’intégrer un simple code HTML / CSS. Et je ne vous parle pas des mises à jour, une vraie corvée.

Il existe une solution !

J’utilise sur mon blog une solution qui permet de rendre la gestion des polices Google simple comme bonjour.

Simplifiez l’hébergement de vos polices

Le paquet spatie/laravel-google-fonts rend l’auto-hébergement des polices Google aussi simple que possible pour les utilisateurs de Laravel.

Par exemple :

// config/google-fonts.php
 
return [
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap',
        'mono' => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap',
    ],
];

// resources/views/layouts/app.blade.php
 
<head>
    // Chargement de la police Inter
    @googlefonts
 
    // Chargement de la police IBM Plex Mono
    @googlefonts('mono')
</head>

Lorsque des polices sont demandées pour la première fois le paquet récupère le CSS, extrait les polices des serveurs de Google, les stocke localement et rend le CSS en ligne dans la balise de votre application.

Si un problème survient au cours de ce processus le paquet se rabat sur une balise pour charger les polices à partir de Google.

Installation

Tout d’abord il faut installer le paquet via Composer :

composer require spatie/laravel-google-fonts

Configuration

Il est possible de modifier la configuration par défaut en publiant le fichier :

php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"

Voici à quoi ressemble le fichier initial :

return [
 
    /*
     * Here you can register fonts to call from the @ googlefonts Blade directive.
     * The google-fonts:fetch command will prefetch these fonts.
     */
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700',
    ],
 
    /*
     * This disk will be used to store local Google Fonts. The public disk
     * is the default because it can be served over HTTP with storage:link.
     */
    'disk' => 'public',
 
    /*
     * Prepend all files that are written to the selected disk with this path.
     * This allows separating the fonts from other data in the public disk.
     */
    'path' => 'fonts',
 
    /*
     * By default, CSS will be inlined to reduce the amount of round trips
     * browsers need to make in order to load the requested font files.
     */
    'inline' => true,
 
    /*
     * When something goes wrong fonts are loaded directly from Google.
     * With fallback disabled, this package will throw an exception.
     */
    'fallback' => ! env('APP_DEBUG'),
 
    /*
     * This user agent will be used to request the stylesheet from Google Fonts.
     * This is the Safari 14 user agent that only targets modern browsers. If
     * you want to target older browsers, use different user agent string.
     */
    'user_agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15',
 
];

Utilisation

Pour charger les polices dans votre application il faut enregistrer une URL d’intégration de Google Fonts et ensuite les charger avec la directive @googlefonts dans une vue Blade.

Ici je vais récupérer la police Montserrat en version italique, gras, épaisseur 400 et 600 :

// config/google-fonts.php
 
return [
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&display=swap',
    ],
];

Puis la charger dans mon layout :

// resources/views/layouts/app.blade.php
 
<head>
    // Je charge ma police par défaut (Montserrat)
    @googlefonts
</head>

Ce simple morceau de code permet d’intégrer le CSS directement dans la balise . Si vous préférez un fichier CSS externe vous pouvez désactiver l’option inline dans la configuration du paquet.

Les polices sont stockées dans un dossier “fonts” sur le disque public par défaut. Si vous souhaitez servir des polices à partir d’un CDN vous pouvez mettre en place une configuration de disque différente.

Précharger les polices avec Artisan

Si vous voulez vous assurer que les polices sont prêtes à l’emploi avant que quelqu’un ne visite votre site vous pouvez les récupérer et les stocker à l’aide de cette commande :

php artisan google-fonts:fetch

Mises en garde

Si vous utilisez spatie/laravel-csp

Si vous utilisez spatie/laravel-csp pour gérer votre CSP (Politique de Sécurité du Contenu) vous devez passer un tableau à la directive @googlefonts dans votre vue Blade et ajouter l’option nonce :

 // resources/views/layouts/app.blade.php
 
 <head>
     // Je charge ma police par défaut (Montserrat)
-    @googlefonts 
+    @googlefonts(['nonce' => csp_nonce()]) 
 </head>

À propos des anciens navigateurs

Les serveurs de Google Fonts analysent l’en-tête de l’agent utilisateur du visiteur pour déterminer le format de police à utiliser. Cela signifie que les polices fonctionnent dans tous les navigateurs modernes comme anciens.

Ce paquet n’est pas en mesure de s’adapter aux différents agents utilisateurs. Avec la configuration par défaut, seuls les navigateurs capables de gérer les fichiers de police WOFF 2.0 sont pris en charge.

Si vous avez besoin de servir des polices à un ancien navigateur, vous pouvez spécifier une chaîne d’agent utilisateur différente dans la configuration. N’oubliez pas que cela alourdit le chargement de la page pour tous les visiteurs.

Conclusion

La gestion des polices d’écritures sur une application Web est un sujet délicat, j’aime à dire qu’il n’y a pas de bonne solution. Il existe juste une solution adaptée à votre situation.

Hébergez vos polices Google sans effort avec Laravel

Contenus associés