Comment importer une police d’écriture de Google à mon site ?

ParThibault HEINRICH

Comment importer une police d’écriture de Google à mon site ?

Afin d’exploiter des polices de Google dans la mise en page de votre site WordPress, il faut sélectionner les fontes, les référencer sur votre site, puis définir ces polices pour les différents éléments que vous souhaitez mettre à jour.

Sélectionner les fontes

Le catalogue des fontes (ou polices d’écriture) de Google est disponible à l’adresse fonts.google.com. Les fontes y sont organisées par familles.

• Sélectionnez les familles qui vous intéressent, en cliquant le petit plus dans le coin supérieur droit.
• Une fois que votre choix est arrêté, cliquez le bandeau noir en bas qui vous indique le nombre de familles sélectionnées.
• Afin d’importer ces familles de police sur votre site, cliquez la rubrique « EMBED » (embarquer) puis la sous rubrique « @IMPORT ».

Importer des fontes Google

• Ensuite, copier le script correspondant (sans les balises <script>). Le script est de la forme :

  @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Rammetto+One');

Importer les fontes sur mon site

WordPress propose systématiquement une fonctionnalité de saisie de CSS personnalisé. On retrouve aussi des outils avancés de personnalisation de style tels que l’extension SiteOrigin CSS. Il suffit de coller le lien précédent à la rubrique appropriés pour que les polices soient disponibles sur votre site.

Personnalisation du style via l’extension SiteOrigin CSS

A noter : Les fontes ne sont pas réellement enregistrées sur votre site. Elle y sont référencées. Ainsi, à chaque fois qu’un internaute demande une page de votre site pour laquelle vous avez défini l’une des polices Google que vous avez importé, le navigateur demande à Google (fonts.googleapis.com) de lui fournir les détails de la police concernée.

Mettre à jour un élément de texte

Dès lors que la fonte est référencée, je peux l’attribuer à n’importe quel contenu de type texte de mon site. Avec l’extension SiteOrigin CSS (confère le rappel sur l’extension SiteOrigin CSS) en mode visuel, une fois le sélecteur correspondant à votre élément de type texte sélectionné, retrouvez le paramètre à la partie Texte : Famille de police. Vous n’avez plus qu’à saisir le nom de la famille.