Bienvenue !

Merci de visiter le site Webcomandcheck. Si vous avez des suggestions ou des remarques pour améliorer le site, do not hesitate :)
Bonne visite !
side-area

Suivez les dernières infos sur les réseaux sociaux

Blog

Changer la typographie d’un site internet

  1. Je choisis ma typographie et je télécharge le fichier
  2. Je convertis ma typographie au format web
  3. Je crée un dossier fonts pour mon thème enfant
  4. J’indique à WordPress le fichier à utiliser

Changer la typographie d’un site internet WordPress permet de le rendre unique, et plus attractif.
Pour modifier la typographie sur un site internet WordPress, il existe des extensions qui permettent de le faire aisément. Néanmoins, le fait d’ajouter en continu des extensions, même pour des modifications mineures ne fait qu’alourdir davantage votre site  web. Par conséquent cela aura un impact négatif sur les performances de votre site internet.

Je vais vous apprendre comment changer facilement la typographie d’un thème WordPress. Pour illustrer mon exemple, je choisis une typographie qui donnera un côté luxe à mon blog.
L’utilisation d’un thème enfant est conseillé, auquel on pourra ajouter une feuille de style CSS (Custom Style Sheet).
Voici la page d’accueil avec sa typographie d’origine :

typographie site internet

J’ai choisi la typographie Audrey pour mon titre principal, que je veux en bleu, et je souhaite obtenir le résultat ci-dessous :

changer la typographie d'un site internet wordpress

 

1. Je choisis ma typographie et je télécharge le fichier

Pour cela, il vous suffit d’effectuer une recherche sur un site spécialisé. Il en existe plusieurs. Dans cet exemple, je suis allée sur le site de Behance.
😱 Vérifiez au préalable que la typographie choisie soit d’une part autorisée pour un usage commercial, si vous avez l’intention de créer un site marchand (certains autorisent l’utilisation uniquement à des fins personnelles). D’autre part elle doit être éligible au format web (autrement ça ne fonctionnera pas !).

2. Je convertis ma typographie au format web

Idem, beaucoup de sites le font gratuitement et en quelques instants. Il est important de convertir la typographie au format web afin qu’elle puisse être supportée par les différents navigateurs. Il existe plusieurs formats : TTF, OTF, WOFF, WOFF2. Je recommande le format WOFF2 car le fichier est plus léger par rapport aux autres.
Pour convertir une typographie, je vais sur le site transfonter.org puis j’importe mon fichier, et enfin je le convertis.

convertir une typographie

 

Je reçois avec mon fichier zip les éléments suivants :

@font-face kit

 

3. Je crée un dossier fonts pour mon thème enfant

La création de ce dossier permettra d’envoyer le fichier WOFF2 dans votre serveur distant (j’utilise FileZilla).

dossier fonts thème enfant Filezilla

transfert fonts Filezilla

 

4. J’indique à WordPress le fichier à utiliser

Tout d’abord, il faut retrouver l’élément de notre titre pour pouvoir le modifier. Il suffit tout simplement de faire un clic-droit puis Inspecter ou bien CTRL+ Maj+ I. Une petite fenêtre va alors s’ouvrir sur le côté ou en bas (cela dépend du navigateur utilisé). On se positionne sur notre titre et on refait la manipulation précédente.

Mon titre principal est donc une class (il pourrait s’agir aussi d’un id), avec une balise de titre H1.
On va ensuite demander à WordPress à ce que la typographie Audrey soit utilisée pour notre titre principal. Il faut donc appeler le fichier, et la fonction CSS @font-face sera d’une aide précieuse.

De plus, lorsque vous convertissez votre typographie, vous avez généralement un fichier stylesheet qui vous donne le code @font-face à insérer qu’il faudra compléter avec les informations de votre site. Vous pouvez le faire soit en passant par le serveur FTP dans votre fichier style.css (créé à l’occasion pour le thème enfant), ou bien directement dans WordPress via l’éditeur de thème, et accédez alors au fichier style.css.

Il ne reste plus qu’à modifier le titre principal avec le code suivant :


@font-face {
font-family: 'Audrey-Normal';
src: url('https://lacuisinedemimi21.ovh/wp-content/themes/kale-child/fonts/Audrey-Normal.woff2') format('woff2');
font-weight:normal;
font-style: normal;
font-display: auto;
}
.header-logo-text {
font-family: 'Audrey-Normal' !important;
color: #052C87;
}

 

Aide :
src : précisez le chemin de dossier où se trouve la typographie (petit rappel : fonts).
Si l’élément est une class on met un . avant (ex: .header-logo-text).
Si l’élément est un id  on met # avant (ex: #header-logo-text).
!important permet de forcer l’affichage s’il n’est pas exécuté automatiquement.

Enfin, on sauvegarde les modifications effectuées, et on vide le cache du site ainsi que du navigateur si nécessaire. Si tout va bien le titre principal aura sa nouvelle typographie.

Astuce :
Vous pouvez faire la modification en direct avec le CSS additionnel mais N’OUBLIEZ PAS DE L’ENREGISTRER DANS VOTRE FICHIER STYLE.CSS.

À vous de jouer ! 😀 

Aucun commentaire

Écrire un commentaire

error: Content is protected !!