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.
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 ?
- Performances : réduction de la taille des fichiers de polices de 70 à 90 % grâce au format WOFF2 et au sous-ensemble Unicode.
- Automatisation : fini les commandes CLI manuelles et les convertisseurs en ligne.
- Cohérence : tous les développeurs de votre équipe utilisent les mêmes paramètres d’optimisation.
