thèmes WordPress
Documentation
Recherche d'articles sur le lecteur audio et le thème WordPress

Comment ajouter une police et une typographie personnalisées

Il existe plusieurs façons d'ajouter des polices personnalisées, en fonction de vos besoins.

Ajoutez des polices personnalisées avec le CSS personnalisé : #

Étape 1 - Collez ce code dans le champ CSS personnalisé. Cela permettra à votre thème de charger une police personnalisée.

@font-face {
    font-family: 'MyWebFont';
    src: url('http://yoursite.com/fonts/webfont.eot'); / IE9 Compat Modes /
    src: url('http://yoursite.com/fonts/webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
    url('http://yoursite.com/fonts/webfont.woff2') format('woff2'), / Super Modern Browsers /
    url('http://yoursite.com/fonts/webfont.woff') format('woff'), / Pretty Modern Browsers /
    url('http://yoursite.com/fonts/webfont.ttf') format('truetype'), / Safari, Android, iOS /
    url('http://yoursite.com/fonts/webfont.svg#svgFontName') format('svg'); / Legacy iOS /
}

Il suffit d'indiquer les chemins absolus de vos fichiers de polices. Notez que vous devez disposer de différents formats de fichiers, car certains navigateurs n'utilisent que certains types de fichiers, comme expliqué ici. https://css-tricks.com/snippets/css/using-font-face/

Étape 2 - Utilisez ensuite ce code CSS en le plaçant également dans le champ CSS personnalisé pour la classe CSS spécifique dans laquelle vous souhaitez utiliser la police :

body, h1{font-family: 'MyWebFont', sans-serif;}

L'exemple ci-dessus utilisera la police personnalisée appelée "MyWebFont" pour les classes Body et H1.

Utiliser un plugin #

Une autre option est d'utiliser le plugin appelé : "Utilisez n'importe quelle police". Certains clients l'ont recommandé mais nous ne l'avons pas testé.

Utiliser Elementor Pro #

Utilisez Elementor Pro afin que vos polices personnalisées apparaissent directement dans le champ typographique de votre widget Elementor.

Mis à jour le 23 février 2022
Cet article vous a-t-il été utile ?
betterdocs-category-grid-icon

Pour commencer

betterdocs-category-grid-icon

Aide générale

betterdocs-category-grid-icon

Podcast spécifique

Toujours coincé ?
Comment pouvons-nous vous aider ?