Objectif
Ajouter une police personnalisée (custom font) à votre site en utilisant l’extension “Custom Fonts“.
Trouver de nouvelles polices
Exemples de ressources :
- https://www.dafont.com/fr/
- https://www.fontsquirrel.com/
- https://www.fontspace.com
- https://www.1001fonts.com
- https://fontlibrary.org
Plusieurs formats de police
TrueType Font (TTF)
- Extension de fichier : .ttf
- Description : TTF est un format de police très répandu. Il est pris en charge par la plupart des systèmes d’exploitation et des navigateurs. Les fichiers TTF peuvent contenir à la fois des données de contour et des données de bitmap.
OpenType Font (OTF)
- Extension de fichier : .otf
- Description : L’OpenType est un format de police développé par Microsoft et Adobe. Il offre des fonctionnalités avancées telles que la prise en charge des polices étendues, des ligatures, et d’autres caractéristiques typographiques avancées.
Web Open Font Format (WOFF)
- Extension de fichier : .woff
- Description : WOFF est un format de police spécifiquement conçu pour une utilisation sur le web. Il compresse les données de police et améliore les performances du chargement de la page. WOFF a plusieurs versions, y compris WOFF 1.0 et WOFF 2.0, cette dernière offrant une meilleure compression.
Web Open Font Format 2.0 (WOFF2)
- Extension de fichier : .woff2
- Description : WOFF2 est une version améliorée de WOFF avec une compression plus efficace. Il est devenu le format standard recommandé pour les polices web en raison de sa meilleure performance en termes de taille de fichier.
Embedded OpenType (EOT)
- Extension de fichier : .eot
- Description : EOT est un format de police développé par Microsoft pour être utilisé précisément avec Internet Explorer. Bien qu’il ne soit pas aussi largement utilisé aujourd’hui, il était autrefois nécessaire pour garantir la compatibilité avec les anciennes versions d’Internet Explorer.
Scalable Vector Graphics Font (SVG)
- Extension de fichier : .svg
- Description : SVG est un format de police basé sur la spécification SVG. Il utilise des fichiers XML pour définir les glyphes de la police. Bien que moins courant que d’autres formats, il est pris en charge par certains navigateurs.
Si votre police ne répond à aucun de ces formats, vous pouvez la convertir en utilisant Webfont Generator (gratuit) : https://www.fontsquirrel.com/tools/webfont-generator
Remarque : certains formats de polices qui ne sont pas compatibles avec les différents navigateurs web
Méthode via le code source
Téléchargez les fichiers de police sur votre serveur.
Vous pouvez les placer dans le répertoire de votre thème enfant, dans un répertoire dédié, par exemple, dans le sous-répertoire “fonts“.
Ajoutez le CSS nécessaire pour définir la police personnalisée dans votre fichier style.css.
Vous pouvez ensuite utiliser votre police personnalisée.
Méthode avec extension Custom Fonts
Extensions > Ajouter une nouvelle : installer et activer l’extension “Custom Fonts”
Apparence > Polices personnalisées, puis “Ajouter une nouvelle police”
Renseignez le nom que vous souhaitez donner à la police, éventuellement une police de secours (ex. Arial) et chargez les fichiers du kit lié à la font.
Le rendu est pré-visualisable sur la partie de droite de l’écran.
Si le rendu vous convient, cliquez sur le bouton “Enregistrer la police”.
Remarque : l’extension Custom Fonts permet également de charger les polices Google Fonts via l’onglet “Polices Google”.
Conseil : ne gardez que les polices utilisées pour éviter des ralentissements de chargement du site.
Utilisation de la police personnalisée avec Astra
Apparence > Personnaliser : le thème Astra reconnaît automatiquement la nouvelle police personnalisée
Utilisation de la police personnalisée depuis le CSS additionnel
Apparence > Personnaliser > CSS additionnel
Renseignez par exemple la règle CSS suivante : h2{font-family: “Bread and butter”, Arial, sans-serif !important;}
