Mai
4

Comment mettre des polices personnalisées sur votre site web ou blog

Comme nous avons pû le voir, en CSS, lorsque vous spécifiez une police, celle-ci doit être présente sur l’ordinateur du visiteur pour être prise en compte, sinon, le suivante dans le liste est utilisée. Il est possible d’utiliser des polices personnalisées d’une autre manière.

Utiliser une police personnalisée en CSS

Par exemple admettons que vous souhaitiez vous servir de la police Trebuchet  sur votre site web ou blog pour modifier vos titres de niveau 2.

Vous allez donc spécifier dans votre feuille de style ceci :

h2 { font-family: "Trebuchet MS" }

Si votre visiteur utilise un Imac, il ne verra pas cette police car elle n’existe pas sous MacOs, le navigateur utilisera la police par défaut à la place.

La solution consiste à utiliser des polices que le site web va chercher en ligne et non en local.

C’est ce que propose Google avec Webfonts. Le code à insérer sur votre blog est fourni avec chaque police.

Voyons comment mettre en place cette police après avoir trouvé celle qui vous plait.

Choix d’une police personnalisée

Vous avez le choix entre 501 fonts, ça vous laisse pas mal de possibilités.

Polices dans Google Webfonts

 

Evidemment il est possible de restreindre le choix.

Vous pouvez effectuer un filtrage en retirant certains types de polices.

Différence entre une police avec et sans sérif

Choisissez par exemple si vous souhaitez les sérifs (pattes en vert) ou pas.

Ou enlevez soit les polices pour écran (Display) soit celles pour l’impression (Handwriting). Non, il n’y a pas de traduction française de Web fonts :(.

Filtrage du type de police

 

Vous pouvez aussi entrer votre propre texte dans Preview text, ce qui vous permet de vérifier si la police personnalisée accepte les accents.

Insertion dans votre site ou blog

En dessous de votre police préférée cliquez sur Quick-use.

Descendez un peu dans la page, vous allez voir un encadré bleu comme suit :

Code a rajouter dans l'entête de la page pour que la police soit prise en compte

Copiez le code HTML qui apparait.

Il faut ensuite le coller entre les balises <head> et </head> de chacune de vos page.

Si vous utilisez un CMS, la manip n’est à faire qu’une seule fois. La section head doit probablement se trouver dans le fichier contenant les entêtes.

Une fois fait, revenez sur Google Webfonts et plus bas vous avez une seconde ligne de code en CSS cette fois.

Code CSS pour utiliser la police

Il vous faut désormais déterminer pour quel élément vous souhaitez que cette police soit utilisée.

Si vous souhaitez l’utiliser partout vous devrez l’insérer dans la section body de votre feuille de style (souvent style.css) de la façon suivante :

body {
     font-family: 'Russo One', sans-serif;
}

Si vous désirez juste l’utiliser pour une citation utilisez blockquote à la place de body ou h1 pour un titre de niveau 1.

A utiliser avec modération

Attention cependant si vous utilisez ce genre de polices pour la totalité de vos pages au temps de chargement.

Comme le site va chercher la police sur internet au lieu de la prendre un local sur votre ordinateur, le temps pour la charger est forcément plus long.

C’est d’une part moins agréable et d’autre part c’est pénalisant au niveau de votre référencement.

Indicateur de temps de téléchargement d'une font dans Webfonts

N’hésitez pas à consulter l’indicateur de temps de chargement indiqué par Google Webfonts.

 

 

 

Articles similaires :

8 Comments to “Comment mettre des polices personnalisées sur votre site web ou blog”

  • hajaklause from poele a bois ecostar 29 mai 2013 à 19 h 32 min

    Bonjour,

    Très intéressant, merci pour le tuto! Mais je me demandais! N’y a-t-il pas un logiciel spécial pour la création de police! Je trouve que c’est plus rapide et ça empêche la page de mettre du temps à charger! Il faut juste tout organiser à l’avance! Préparé toutes les polices qui vont servir au site puis les mettre dans un dossier sur le local et les utiliser dans un code normal! Je ne sais pas vous mais c’est de cette façon que je travail et jusqu’à maintenant tout va bien! Bref, le tuto est quand même très intuitif! Encore un grand merci à la rédaction! :)

  • Arnaud 29 mai 2013 à 19 h 53 min

    Je ne connais de logiciel de ce genre, je ne me suis jamais amusé à créer mes propres polices à vrai dire :) Il y’en a déjà bien assez sur le net .

  • referencement 11 juillet 2013 à 10 h 57 min

    Ce logiciel est magnifique. Je l’ai essayé une fois mais c’est imprésionnant.

  • dorian from jeu en bois 30 septembre 2013 à 19 h 42 min

    Merci pour cet article car bien souvent la police sur les sites internet, sont fades et bien souvent la lecture reste monotone avec de belles polices, cela donnera un caché et une originalité au site en question !
    dorian@jeu en bois Articles récents..jeu ecologiqueMy Profile

  • Dent de sagesse 28 avril 2014 à 15 h 12 min

    Merci pour tous ces articles, c’est très intéressant et super complet
    Dent de sagesse Articles récents..Prix extraction dent de sagesseMy Profile

  • yanik from meubles salle de bain 24 mai 2014 à 16 h 15 min

    je trouve ton article tres interessent merci pour toi
    yanik@meubles salle de bain Articles récents..cuisine et salle de bainMy Profile

  • wii u 7 juillet 2014 à 7 h 00 min

    Comme vous le dites tous, c’est un bon tutos, mais je me demande comment on utilise CSS pour faire des slides images sans passer par javascript ?
    wii u Articles récents..La Wii U GamePad tablette tactile ou manette de jeu ?My Profile

    • Arnaud 7 juillet 2014 à 19 h 54 min

      Pour ça je t’invite à aller voir ce tuto par exemple.