Comment ajouter une police personnalisée dans Cassiopeia?

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!

Recommandations d'usage

  • Faites une sauvegarde de votre site avant toute modification, et testez votre sauvegarde
  • Travaillez sur un template enfant, pas sur le template par défaut
  • Si vous ne comprenez pas ce que vous lisez ici, ne l'appliquez pas

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
Fonts Scheme Cassiopeia parameters
Jeu de police dnas les paramètres de Cassiopeia

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

Les polices système sont les plus performantes, bien qu'il puisse y avoir de petites différences entre les systèmes d'exploitation.
Le chargement de polices à partir de sources externes peut être contraire aux règles de confidentialité dans certains pays.
Le chargement de polices à partir d'un dossier local peut avoir un impact sur les performances de votre site.

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

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.

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!

Recommandations d'usage

  • Faites une sauvegarde de votre site avant toute modification, et testez votre sauvegarde
  • Travaillez sur un template enfant, pas sur le template par défaut
  • Si vous ne comprenez pas ce que vous lisez ici, ne l'appliquez pas

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
Fonts Scheme Cassiopeia parameters
Jeu de police dnas les paramètres de Cassiopeia

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

Les polices système sont les plus performantes, bien qu'il puisse y avoir de petites différences entre les systèmes d'exploitation.
Le chargement de polices à partir de sources externes peut être contraire aux règles de confidentialité dans certains pays.
Le chargement de polices à partir d'un dossier local peut avoir un impact sur les performances de votre site.

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

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.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

Site Web Facebook LinkedIn Twitter Joomla Courriel

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net

Liens rapides