Si vous avez envie de changer la police par défaut de Cassiopeia pour personnaliser l'apparence du contenu de votre site ou pour l'adapter à votre charte graphique, alors ce qui suit est fait pour vous. En effet, changer ou ajouter une Google font n'est pas une opération compliquée en soi mais il y a certains détails importants à prendre en compte avant d'intervenir. Dans ce tutoriel, nous allons voir comment ajouter une Google font dans Cassiopeia, le template par défaut de Joomla .
La police par défaut de Cassiopeia
Vous pouvez facilement identifier la police par défaut en vous rendant dans les paramètres de Cassiopeia.
Pour cela, cliquez sur Système dans le menu latéral. Puis cliquez sur Styles des templates du site dans la rubrique Templates :
Ouvrez ensuite votre template (Cassiopeia, dans cet exemple) :
Ouvrez l'onglet Avancé où vous trouverez (pour Cassiopeia), le paramètre Préférence des polices.
Selon la manière dont vous souhaitez que votre police soit chargée dans votre site, vous devez faire face à un dilemme important :
- Aucune : dans ce cas, vous laissez le navigateur de l'internaute afficher votre site avec une police par défaut que vous ne maitrisez pas. Dans ce cas, l'apparence de votre site Web est imprévisible.
- Police issue du Web : attention, le chargement de polices à partir de sources externes peut, dans certains pays, être contraire à la réglementation sur la vie privée (RGPD).
Qui plus est, cette méthode doit être votre dernier choix car elle a un impact très négatif sur les performances de votre site.
- Police issue d'un dossier : charger une police depuis un dossier de votre site a également un impact sur les performances mais c'est la moins pire des solutions à votre disposition.
Quelle police choisir et pourquoi ?
La question de savoir quelle Google font ajouter dans Cassiopeia a deux facettes :
- Cette police est-elle lisible et belle ? Autant la beauté d'une police est un critère subjectif, autant l'aspect de la lisibilité est primordiale d'un point de vue de l'accessibilité.
- Cette police est-elle techniquement envisageable ? Seules les polices installées sur un ordinateur ou disponibles en ligne sont techniquement possibles - les polices Web. Sur mon ordinateur, la police Calibri est installée. Je peux la spécifier comme police dans un fichier CSS. Celle-ci sera visible sur mon ordinateur et par tous les visiteurs qui ont installé cette police. Pour tous les autres, c'est une police différente qui s'affichera, c'est à dire la police par défaut du navigateur si je n'ai pas spécifié de police alternative.
Ajouter une Google font dans Cassiopeia
Nous allons voir maintenant les deux options qui permettent d'ajouter une Google font dans Cassiopeia. A vous de faire votre choix en fonctions des éléments et des arguments présentés plus haut.
Ajouter une Google font depuis une source externe
1. Ouvrez Google font
2. Choisissez votre font et copiez le code indiqué par Google (exemple avec la font PT Sans):
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');3. Collez ce code dans votre fichier user.css
4. Utilisez la syntaxe font-family: 'PT Sans', sans-serif; dans vos CSS pour appeler votre nouvelle font.
Ajouter une Google font dans un dossier local
1. ouvrez Google Webfonts Helper
2. après avoir sélectionné votre font, téléchargez le dossier .ZIP contenant tous les fichiers nécessaires. Dézippez-le sur votre ordinateur.
3. envoyez le dossier contenant tous les fichiers sur votre serveur dans media/templates/site/cassiopeia/fonts
4. ouvrez le fichier user.css de votre template et collez le code fourni par Google Webfonts Helper :
/* pt-sans-regular - latin */
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/pt-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/pt-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pt-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pt-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/pt-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/pt-sans-v16-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}Voilà, vous savez maintenant comment ajouter une Google font dans Cassiopeia. Prenez soin de choisir la meilleur option pour vos visiteurs (accessibilité et performance) et pour vous (contrôle de l'affichage et respect du RGPD).