Servir des polices de caractères (Apache, nginx)

La plupart des sites modernes font appel à des polices de caractères qui ne sont pas installées sur les systèmes d’exploitation de leurs visiteurs.

L’utilisation de Google Fonts est très largement répandue mais cela ajoute un délai de traitement dans le chargement des pages car cela nécessite autant de requêtes externes.

Il est également possible de placer les fichiers dans le répertoire du thème graphique et de les servir directement depuis le serveur de fichier, comme Apache ou NginX.

Tout d’abord, il faut configurer les bons entêtes http. Cela permet aux navigateurs de bien interpréter les fichiers demandés comme polices de caractères.

Configuration des polices pour Apache

Pour définir le bon mime-type pour les polices, ajoutez ce bloc à votre configuration Apache:

Codeable: embauchez les meilleurs développeurs WordPress

AddType application/x-font-ttf ttc ttf
AddType application/x-font-otf otf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot

Si vous n’avez pas accès à la configuration du VirtualHost, placez ce bloc dans le fichier .htaccess du site.

Pour les entêtes CORS, ajoutez ce bloc:

<filesmatch ".(eot|ttf|otf|woff|woff2)"="">
  Header set Access-Control-Allow-Origin "*"Code language: JavaScript (javascript)

Configuration des polices pour NginX

LA configuration par default de NginX ne prend pas en compte les types mime des formats de fontes optimizés pour le web.

Il est à noter également que le type mime des fichiers .eot est erroné, il nous faut donc le modifier.

1. Editez le fichier /etc/nginx/mime.types et supprimez la ligne concernant l’extension eot.

2. Ensuite, ajoutez ce bloc :

application/x-font-ttf ttc ttf;
application/x-font-otf otf;
application/font-woff woff;
application/font-woff2 woff2;
application/vnd.ms-fontobject eot;

3. Pour les entêtes CORS, ajoutez ce bloc à la configuration du vhost:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}

Et voilà, votre serveur de fichier est maintenant capable de servir vos fichiers de polices de caractères.

Il est recommandé de ne pas abuser des fontes de caractères : pas plus de 3 familles de fontes différentes sur un site web. Les navigateurs ayant chacun leurs petites subtilités et standards, ils ne se sont toujours pas mis d’accord sur un seul et même format de fichier.

Le plus lu : HTML5 : corriger l'erreur "The frameborder attribute on the iframe element is obsolete. Use CSS instead."

En pratique, les formats WOFF2 et WOFF sont à privilégier (ils couvrent plus de 96% des utilisateurs) mais suivant le public ciblé, il faut penser à offrir les autres variantes de fichiers.