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
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.
Ouvrez un service de polices en ligne tel que FontSquirrel ou similaire.
Cherchez votre police. Dans cet exemple, nous prendrons Cantarell.
Ouvrez l'onglet "Webfont Kit".
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).
Choisissez les formats: .woff (pour les navigateurs modernes) et .ttf (pour Safari, Android, iOS) sont recommandés.
Cliquez sur le bouton Download @FontFace Kit pour télécharger l'archive cantarell-fontfacekit.zip sur votre ordinateur.
Dézippez l'archive que vous venez de télécharger et ouver le dossier web fonts
Dans les sous-dossiers, vous trouverez les deux fichiers suivants:
Cantarell-Regular-webfont.ttf
Cantarell-Regular-webfont.woff
Ouvrez votre client SFTP (FileZilla, par exemple)
Connectez-vous à votre serveur et accédez au dossier: /media/templates/site/cassiopeia de votre site
Créez un nouveau dossier fonts: /media/templates/site/cassiopeia/fonts
Dans ce nouveau dossier fonts, téléchargez les fichiers Cantarell-Regular-webfont.woff et Cantarell-Regular-webfont.ttf vus précédemment
Dans votre panneau d'administration Joomla, ouvrez Templates du site
Sélectionnez votre template enfant
Cliquez sur le dossier CSS pour ouvrir votre fichier user.css (créez-en un si vous n'en avez pas) dans l'éditeur
Copiez/collez les lignes de code suivantes en haut de votre fichier user.css:
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.
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.
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
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.
Ouvrez un service de polices en ligne tel que FontSquirrel ou similaire.
Cherchez votre police. Dans cet exemple, nous prendrons Cantarell.
Ouvrez l'onglet "Webfont Kit".
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).
Choisissez les formats: .woff (pour les navigateurs modernes) et .ttf (pour Safari, Android, iOS) sont recommandés.
Cliquez sur le bouton Download @FontFace Kit pour télécharger l'archive cantarell-fontfacekit.zip sur votre ordinateur.
Dézippez l'archive que vous venez de télécharger et ouver le dossier web fonts
Dans les sous-dossiers, vous trouverez les deux fichiers suivants:
Cantarell-Regular-webfont.ttf
Cantarell-Regular-webfont.woff
Ouvrez votre client SFTP (FileZilla, par exemple)
Connectez-vous à votre serveur et accédez au dossier: /media/templates/site/cassiopeia de votre site
Créez un nouveau dossier fonts: /media/templates/site/cassiopeia/fonts
Dans ce nouveau dossier fonts, téléchargez les fichiers Cantarell-Regular-webfont.woff et Cantarell-Regular-webfont.ttf vus précédemment
Dans votre panneau d'administration Joomla, ouvrez Templates du site
Sélectionnez votre template enfant
Cliquez sur le dossier CSS pour ouvrir votre fichier user.css (créez-en un si vous n'en avez pas) dans l'éditeur
Copiez/collez les lignes de code suivantes en haut de votre fichier user.css:
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.
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.
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.
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.