Programmation

Comment insérer une police de caractère avec Google Fonts ?

, , ,

Grâce à Google Web Fonts, il est possible d’utiliser un très grand nombre de polices de caractères sur blog. Certaines sont très jolies.

En voici 3 exemples de polices de caractères :

  • Hanalei : COUCOU
  • Mrs Saint Delafield : COUCOU
  • Grand Hotel : COUCOU

A la date d’écriture de cet article, il y avait 613 polices de caractères disponibles, sympa non ? :)
Comment faire ?

  • Récupérer le code sur Google Fonts.

Rendez-vous sur **Google Web Fonts.

  • Choisir la police de caractère (Font)
  • Cliquer sur le +
  • Récupérer le code à installer.

Par exemple pour la police Hanalei le llien est le suivant : 

1
<link href='https://fonts.googleapis.com/css?family=Hanalei' rel='stylesheet' type='text/css'>*

  • Intégration.

Sur le site, placer la balise <link …> entre les balises <head> et </head> si possible.

Remarque : sous WordPress, coller le lien en début de page en mode HTML

Pour appliquer le code CSS, pour la police Hanalei on peut procéder ainsi :

Code :

1
<span style="font-family: 'Hanalei', cursive; font-size: 25px; color: orange;">COUCOU</span>

Résultat :

COUCOU

Dans cet exemple :

  • Le type de police est Hanalei : font-family: ‘Hanalei’, cursive;
  • la taille de la police est de 25 pixels : font-size: 25px;
  • la couleur de la police est orange : color: orange;.

C’est fini. A bientôt sur Outils Web

Partager