Menu

Outils, Inbound marketing

Comment ajouter une typo sur WordPress en 3 min ? [pour les nuls]

Loïc BURDET le 04 novembre 2015
Loïc BURDET

Vous aimeriez personnaliser votre site internet en ajoutant les polices de votre charte graphique, mais vous ne savez pas comment faire... Voici un tuto hyper rapide qui va vous permettre de customiser vos prochains sites en ajoutant la police de votre choix sur WordPress. Allez, c'est parti !

Quelles sont les étapes pour ajouter une typo sur WordPress ?

  1. Télécharger gratuitement ou acheter la police de vos rêves sur un site de typographie (Dafont, MyFonts...) Vous récupérez ainsi une police au format .ttf généralement. Or ce seul format ne permet pas à votre police d'être lue par tous les navigateurs. Il faut donc la convertir en plusieurs formats ;
  2. Vous rendre sur le très bon site Fontsquirrel, qui va vous permettre de réaliser la conversion de votre typographie. Attention : une typographie propriétaire ne pourra pas être convertie par le site ;
  3. Ajouter les fonts sur le serveur : dézipper le fichier téléchargé puis placer les polices dans le dossier FONTS du template via votre gestionnaire FTP préféré (Filezilla pour ne citer que lui) ;
  4. Ajouter la CSS sur le site : ouvrir le fichier stylesheet.css puis copier le texte et le coller dans l’éditeur de CSS (Apparence > Modifier le CSS)
  5. Sauvegarder. Votre police est prête à être utilisée :) 

Exemple de CSS

@font-face {

font-family: 'caviar_dreamsregular';

src: url('caviardreams-webfont.eot');

src: url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),

url('caviardreams-webfont.woff') format('woff'),

url('caviardreams-webfont.ttf') format('truetype'),

url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');

font-weight: normal;

font-style: normal;

}

body{ font-family: 'caviar_dreamsregular'; }

Pour aller plus loin, n'hésitez pas à télécharger notre guide sur les légendes SEO afin d'optimiser votre stratégie de référencement.

Les légendes du SEO

Lecture sans distraction

COMMENTAIRES

Rejoignez la communauté Ideagency

Découvrez chaque semaine de nouveaux articles sur l'industrie spécialisée (robotique, aéronautique, automobile, bâtiment)