Comment ajouter une police personnalisée dans Cassiopeia?

Après avoir cassé Joomla avec la suppression de Font Awesome de Cassiopeia, je vous propose de de casser Internet en ajoutant une nouvelle police dans Cassiopeia.

Plus sérieusement, aucun des conseils donnés dans mes articles ne brisera jamais Joomla ou le Web. Les solutions proposées dans mes articles sont toujours testées et contrôlées avant d'être publiées.

De plus, la modification d'un template enfant ne peut que casser le design de votre site, absolument pas le CMS. Mais, et parce qu'il vaut mieux être sérieux quand on parle de Joomla, je vous recommande fortement de faire une sauvegarde avant toute édition/modification sur votre site Web.

Dernier conseil avant de commencer l'article : si vous n'êtes pas assez en confiance pour ajouter une police personnalisée dans Cassiopeia, ne le faites pas et contactez moi!

Le jeu de polices par défaut dans Cassiopée

Par défaut, Cassiopeia vous permet de choisir entre les différentes options suivantes pour votre jeu de police:

• Polices système, avec différentes options pour le corps et pour les titres;
• Roboto depuis une dossier local dans votre template (/media/vendor/roboto-fontface/fonts);
• Polices Google depuis le Web (serveur externe);
• Aucun

A ce stade, il est utile de garder à l'esprit l'avertissement affiché dans les paramètres de Cassiopée:

Comment ajouter une police personnalisée dans Cassiopeia?

Si aucune de ces options natives ne répond à vos besoins, sélectionnez Aucun comme modèle de polices dans les paramètres Cassiopée. Et puisque vous souhaitez ajouter une police personnalisée dans Cassiopeia, voici une solution pour vous.

1. Ouvrez un service de polices en ligne tel que FontSquirrel ou similaire.
2. Cherchez votre police. Dans cet exemple, nous prendrons Cantarell.
3. Ouvrez l'onglet "Webfont Kit".
4. Choisissez un subset (Le subsetting reduit réduit le nombre de glyphes dans la police pour générer un fichier plus petit. Si la police prend en charge une langue particulière, elle apparaîtra dans la liste déroulante).
5. Choisissez les formats: .woff (pour les navigateurs modernes) et .ttf (pour Safari, Android, iOS) sont recommandés.
6. Cliquez sur le bouton Download @FontFace Kit pour télécharger l'archive cantarell-fontfacekit.zip sur votre ordinateur.



7. Dézippez l'archive que vous venez de télécharger et ouver le dossier web fonts
8. Dans les sous-dossiers, vous trouverez les deux fichiers suivants:
   • Cantarell-Regular-webfont.ttf
   • Cantarell-Regular-webfont.woff
9. Ouvrez votre client SFTP (FileZilla, par exemple)
10. Connectez-vous à votre serveur et accédez au dossier: /media/templates/site/cassiopeia de votre site
11. Créez un nouveau dossier fonts: /media/templates/site/cassiopeia/fonts
12. Dans ce nouveau dossier fonts, téléchargez les fichiers Cantarell-Regular-webfont.woff et Cantarell-Regular-webfont.ttf vus précédemment
13. Dans votre panneau d'administration Joomla, ouvrez Templates du site
14. Sélectionnez votre template enfant
15. Cliquez sur le dossier CSS pour ouvrir votre fichier user.css (créez-en un si vous n'en avez pas) dans l'éditeur
16. Copiez/collez les lignes de code suivantes en haut de votre fichier user.css:

@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('../fonts/Cantarell-Regular-webfont.woff') format('woff'), 
url('../fonts/Cantarell-Regular-webfont.ttf') format('truetype'), 
}

17. Enregistrez votre saisie
18. Videz les caches (Joomla et navigateur) pour vérifier que votre nouvelle police est maintenant chargée et affichée comme prévu.

Explications à propos de font-display: swap - Le moyen le plus simple d’éviter d’afficher du texte invisible pendant le chargement des polices personnalisées consiste à afficher temporairement une police système. En incluant font-display: swap dans votre style @font-face, vous pouvez éviter un flash de texte invisible (FOIT) dans la plupart des navigateurs modernes.

Allons un peu plus loin avec preload !

Dernière partie mais non des moindres, je vais maintenant vous montrer comment précharger vos polices web en utilisant rel="preload" pour supprimer tout flash de texte non stylisé (FOUT) et améliorer leur vitesse de chargement.

Adaptez ces lignes de code en fonction de vos polices et ajoutez les dans la balise <head> du fichier index-php de votre template enfant.

<link rel="preload" href="/media/templates/site/cassiopeia/fonts/mycustomfont.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/media/templates/site/cassiopeia/fonts/mycustomfont.ttf" as="font" type="font/ttf" crossorigin>

Explications

L'attribut as="font" type="font/woff" indique au navigateur de télécharger cette ressource en tant que police et aide à prioriser cette ressource dans la file.

L'attribut crossorigin indique si la ressource doit être récupérée avec une requête CORS car la police peut provenir d'un domaine différent. Sans cet attribut, la police préchargée est ignorée par le navigateur.

Avec preload, le navigateur sait qu'il doit télécharger ce fichier plus tôt. Il est important de noter que s'il n'est pas utilisé correctement, preload peut nuire aux performances en effectuant des requêtes inutiles pour des ressources qui ne sont pas utilisées.

Lectures recommandées

Voici quelques sources fiables pour tous ceux qui souhaitent en savoir plus sur les polices et CSS.

• EN savoir plus sur l'attribut crossorigin
• @font-face expliqué en détail
• L'attribut rel="preload"

Conclusion

Avec cette solution, vous avez pu ajouter votre police personnalisée dans Cassiopée (sans casser l'ensemble du Web) tout en améliorant leur chargement par les navigateurs. Cette solution est également conforme au RGPD puisque votre police est stockée sur votre site Web et non sur un serveur distant.

Merci d'avoir lu et pour vos partagés.