Vous ouvrez l'administration de votre template Joomla, vous cliquez sur l'onglet « Typographie », et là, vous tombez sur un menu déroulant avec 47 polices dont vous n'avez jamais entendu parler. Vous en choisissez une au hasard parce qu'elle a un joli nom. Trois semaines plus tard, vous vous demandez pourquoi les visiteurs restent en moyenne 40 secondes sur vos pages.
J'ai fait exactement cette erreur. Sur mon premier site Joomla, j'ai craqué pour une police décorative trouvée sur un site de fonts gratuites. Sublime dans l'aperçu. Catastrophique une fois appliquée à un paragraphe de 200 mots. Le pire ? Je ne m'en suis rendu compte qu'en regardant les statistiques de rebond, deux mois plus tard, sans faire le lien.
Choisir la police idéale pour un site Joomla, ce n'est pas un exercice esthétique. C'est une décision technique, éditoriale et juridique à la fois. Et la plupart des guides oublient les trois quarts du problème.
Points clés à retenir
- Une police se choisit d'abord pour la lisibilité, l'esthétique vient après
- Sur Joomla, l'intégration passe par les paramètres du template, un
custom.cssou le framework du template (Gantry, Helix…) - Le poids des webfonts pèse directement sur le temps de chargement
- En Europe, l'auto-hébergement des polices évite bien des questions juridiques
- Une taille de corps entre 16 et 18 px reste la base confortable
Choisir la police idéale pour un site Joomla : la vraie question n'est pas celle que vous croyez
Tout le monde cherche « la plus belle police ». Mauvaise piste. La question utile, c'est : quelle police mon template Joomla peut-il réellement accueillir sans casser ma mise en page ni plomber mes performances ?
Parce qu'un site Joomla n'est pas une page isolée. C'est un CMS avec un template, un framework éventuel, des extensions, un système de cache. La police que vous allez injecter doit cohabiter avec tout ça.
Pourquoi Joomla change la donne par rapport à WordPress
Sur Joomla, la typographie est historiquement gérée au niveau du template, pas du contenu. Les templates modernes (ceux basés sur Helix Ultimate, Gantry 5, T4) proposent des panneaux de paramètres où vous choisissez la police des titres, du corps de texte, des menus. Pratique. Mais ça crée une illusion : celle qu'on peut tout changer d'un clic sans conséquence.
Sauf que derrière ce clic, le template va souvent charger une webfont depuis un CDN externe. Et là, deux problèmes surgissent : le poids, et le RGPD.
J'ai migré un site client l'an dernier. Le template chargeait quatre variantes de police Google Fonts, dont deux jamais utilisées dans le CSS réel. En les supprimant et en auto-hébergeant les deux restantes, j'ai gagné 1,3 seconde sur le Largest Contentful Paint. Pas de la magie. Juste du ménage.
Quelle est la meilleure police pour un site web ?
Il n'existe pas de réponse universelle, et méfiez-vous de quiconque vous en vend une. Ce qui existe, en revanche, c'est une catégorie de polices qui fonctionnent presque partout : les sans-serif humanistes ou géométriques, conçues pour l'écran.
Les polices web dites « de labeur » (workhorses) partagent quelques traits : une hauteur d'x généreuse, des formes ouvertes, un contraste modéré entre pleins et déliés. Elles se lisent bien même en petit, même sur un écran de téléphone, même avec une mauvaise vue.
Celles qui tiennent la route dans 90 % des cas
- Open Sans — le couteau suisse, un peu banal mais increvable
- Inter — pensée pour les interfaces, excellent rendu en petites tailles
- Roboto — dense, économique en largeur, très répandue sur Android
- Source Sans — plus discrète, un peu moins vue, très propre
- Et côté serif pour les titres : Merriweather, lisible même en gras
Pour les sites e-commerce, un article de Shopify sur les meilleures polices web rappelle un point simple : les typographies influencent la perception de votre marque et facilitent la lecture sur tous les navigateurs et appareils. C'est exactement le critère à retenir. Une police qui « facilite la lecture » bat une police qui « en jette ».
Celles que je vous déconseille (et pourquoi)
Les polices manuscrites et script sur de longs paragraphes : non. Les polices ultra-condensées pour du corps de texte : non. Les polices à empattements très fins sur fond clair : non, elles disparaissent.
Et un piège spécifique à Joomla : beaucoup de templates de démonstration utilisent des polices premium incluses dans le package. Si vous changez de template dans deux ans, vous perdez la licence. Vérifiez toujours si la police est livrée avec le template ou si elle est sous licence séparée.
Comment choisir la bonne police d'écriture ?
Ma méthode tient en quatre filtres, dans cet ordre. Si une police échoue au premier, inutile de tester les autres.
- Lisibilité sur petit écran. Ouvrez un paragraphe sur votre téléphone, en 16 px. Si vous plissez les yeux, c'est mort.
- Cohérence avec le ton du site. Un cabinet d'avocats et un blog de skateboard n'ont pas besoin de la même chose.
- Disponibilité des graisses. Il vous faut au minimum régulier, italique et gras. Un demi-gras est un bonus appréciable pour les sous-titres.
- Poids du fichier. Une fonte complète peut peser plusieurs centaines de kilo-octets. Une variante optimisée en woff2 descend bien plus bas.
Le test que je fais systématiquement avant d'intégrer
Je crée une page Joomla bidon, hors navigation, avec un faux article de 600 mots et un titre H2. J'y applique la police candidate. Puis je la regarde sur trois supports : mon écran de bureau, mon téléphone, et un vieux laptop si j'en ai un sous la main.
Le résultat m'a souvent surpris. Une police qui semblait parfaite en grand corps devenait brouillonne en petit. Une autre, fade dans l'aperçu, se révélait d'une clarté remarquable une fois intégrée.
Franchement, ce test de vingt minutes m'a épargné au moins deux refontes complètes.
Comment intégrer concrètement une police dans Joomla
Trois chemins possibles. Le choix dépend de votre template et de votre aisance avec le CSS.
| Méthode | Pour qui | Avantage | Limite |
|---|---|---|---|
| Paramètres du template | Débutant | Zéro code | Dépend du template, parfois limité |
CSS personnalisé (custom.css) | Intermédiaire | Contrôle total | Il faut connaître les sélecteurs |
| Plugin ou framework (Gantry, Helix) | Selon le template | Centralisé | Ajoute une couche à maintenir |
La méthode CSS personnalisée, la plus fiable
Vous placez vos fichiers de police auto-hébergés dans un dossier de votre template, par exemple /templates/montemplate/fonts/. Puis dans le custom.css du template, vous déclarez la règle @font-face avec le chemin vers le fichier woff2, et vous appliquez la famille au body.
L'astuce que j'utilise systématiquement : ajouter la propriété font-display: swap. Elle affiche immédiatement un texte dans une police de secours, puis remplace dès que la webfont est chargée. Sans elle, sur une connexion mobile lente, le visiteur voit une page blanche pendant que la police se télécharge.
L'auto-hébergement, question pas seulement technique
Charger une police depuis un CDN externe envoie l'adresse IP de vos visiteurs à un tiers. En Europe, ça pose des questions de conformité que beaucoup de sites ignorent encore. Auto-héberger vos polices règle le problème et accélère souvent le chargement.
Le coût ? Télécharger les fichiers, les placer dans le template, écrire une règle @font-face. Une heure de travail pour un site existant.
Quelle est la taille de police idéale ?
16 px pour le corps de texte sur mobile. C'est le plancher. Sur desktop, 17 à 18 px est souvent plus confortable selon la police retenue.
Pourquoi ce chiffre ? Parce qu'en dessous, les navigateurs mobiles déclenchent parfois un zoom automatique au moment où l'utilisateur tape dans un champ. Et parce qu'une bonne partie des visiteurs a plus de 45 ans.
Construire une échelle cohérente
Ne choisissez pas chaque taille au hasard. Une échelle typographique simple fonctionne pour presque tous les sites de contenu :
- Corps de texte : 16 à 18 px
- Sous-titres H3 : 22 à 24 px
- Titres H2 : 28 à 32 px
- Titre principal H1 : 36 à 44 px
J'ajoute une règle de hauteur de ligne (line-height) de 1,5 à 1,6 pour le corps de texte. En dessous, les lignes se collent. Au-dessus, le regard se perd entre les lignes.
Autre détail qui compte : la longueur de ligne. Visez 60 à 75 caractères par ligne. Au-delà, l'œil fatigue à revenir au début de la ligne suivante. Sur un template Joomla avec une colonne de contenu large, il faut parfois ajouter une max-width au bloc de texte.
Quelle police utiliser sur un site, en résumé ?
Une sans-serif lisible pour le corps, éventuellement une serif plus marquée pour les titres. Deux familles maximum. Le reste, c'est de la décoration.
Le contraste entre une serif pour les titres et une sans-serif pour le texte fonctionne bien, mais uniquement si le contraste est réel. Une serif et une sans-serif trop proches visuellement créent une impression de flou, pas de hiérarchie.
Ma conviction, et je l'assume : une seule famille bien choisie bat deux familles moyennes. J'ai vu des sites remarquables reposer sur une unique police, avec une hiérarchie construite sur les graisses et les tailles plutôt que sur la variété des fontes.
Ce qui reste quand on a tout réglé
La typographie d'un site Joomla, c'est un réglage qu'on fait une fois et qu'on oublie. C'est justement pour ça qu'il faut le faire correctement : vous n'y reviendrez pas avant deux ou trois ans, et d'ici là, chaque visiteur aura vécu avec votre choix.
La prochaine fois que vous tombez sur un site qui « respire bien », qui se lit sans effort, qui donne une impression de sérieux tranquille, regardez sa police de près. Neuf fois sur dix, elle est d'une banalité désarmante. C'est peut-être ça, le vrai secret : la meilleure police, c'est celle que personne ne remarque.
