Arnaud Lemercier
Arnaud Lemercier

font-optimizer pour réduire de 90% le poids de vos polices dans vos projets PHP

Aujourd'hui, la majorité des sites web utilisent des polices personnalisées. Ces polices sont chargées sous forme de plusieurs fichiers lors du premier chargement d'un site web. Le poids des polices est loin d'être négligeable. Une police comme Roboto chargée en 3 graisses peut représenter 450 Ko en TTF.

Si vous avez lu mon dernier article sur la réduction du poids des polices grâce au subsetting, vous savez maintenant qu'il existe des techniques pour réduire des fonts comme Roboto de plus de 90% en combinant le format compressé WOFF2 et la réduction de glyphes grâce au subsetting.

Qu'est-ce que font-optimizer ?

font-optimizer est un package PHP opensource qui s'installe avec composer (packagist) et qui permet de mettre en place un workflow d'optimisation de vos fichiers de polices.

Concrètement, font-optimizer ajoute une commande qui va parcourir vos fichiers TTF (source) et en créer des versions WOFF2 optimisée dans votre dossier /public/fonts/ (personnalisable)

Par défaut, il va prendre les fichiers de la source resources/fonts/ et les convertir en WOFF2 en supprimant les caractères inutiles.

font-optimizer qui réduit 3 polices de plus de 96%

Installation de font-optimizer

Installer fonttools et brotli :

# Ubuntu / Debian
sudo apt update && sudo apt install -y python3 python3-fonttools python3-brotli

# macOS
brew install python3 && pip3 install fonttools brotli

Installer font-optimizer avec composer :

composer require --dev uxcode-fr/font-optimizer

Télécharger les fontes

Vous pouvez aller sur Google Fonts pour télécharger vos polices préférées. font-optimizer prends en charge les polices variables.

Par défaut, vous devez placer vos polices dans le dossier resources/fonts/ (configurable).

Optimiser les polices (réduction jusqu'à 96% du poids)

Vous pouvez lancer la commande font-optimizer depuis votre terminal :

vendor/bin/font-optimizer

Vos nouvelles fontes sont gérées dans le dossier /public/fonts/ (configurable).

Chargez votre nouvelle police sur votre site

Il ne vous reste plus qu'à déclarer votre nouvelle police entre les balises <head></head> :

<!-- Preload : le navigateur télécharge la fonte dès le parsing du <head> -->
<link rel="preload" href="/fonts/roboto-variablefont-wdth,wght.woff2" as="font" type="font/woff2" crossorigin>

<style>
    @font-face {
        font-family: 'Lexend';
        src: url('/fonts/roboto-variablefont-wdth,wght.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: optional;
    }
</style>

font-optimizer est entièrement configurable

Dans un projet Laravel, vous pouvez utiliser la commande suivante pour créer le fichier de configuration :

php artisan vendor:publish --tag=font-optimizer-config

Voici un exemple de configuration :

<?php

return [
    'source'      => 'resources/fonts',                     // directory containing .ttf source files
    'destination' => 'public/fonts',                        // directory where output files will be saved
    'unicodes'    => 'U+0020-007F,U+00A0-00FF,U+0152-0153', // Unicode ranges to subset
    'features'    => 'kern,liga',                           // OpenType features to preserve
    'flavor'      => 'woff2',                               // output format: woff2 or woff
    'name_ids'    => '*',                                   // name table IDs to keep (* = all)
    'hinting'     => true,                                  // keep hinting instructions
];

Pourquoi utiliser cette solution ?

Sources