Modifier la police de votre front-end avec Google Fonts

Modifier la police de votre front-end avec Google Fonts

Allez sur le site Google Fonts. Voici l'URL de Google Fonts : fonts.google.com Recherchez la Google Font que vous souhaitez appliquer à votre front-end. Cliquez sur une police dans la liste des résultats pour ouvrir sa page.

Cliquez sur "Select" en bout de ligne pour chaque graisse de police que vous souhaitez pouvoir utiliser sur votre front-end Nous vous conseillons de sélectionner au minimum les graisses suivantes : • Light • Regular • Bold La liste des graisses sélectionnées s'affiche dans la barre de droite Une fois toutes les graisses sélectionnées, sélectionnez l'option "@import".

Puis sélectionnez cette portion de code, et copiez-la. Sélectionnez uniquement la portion de code démarrant par @ et terminant par ; Vous n'avez pas besoin de copier les balises <style> </style>. Rendez-vous sur le back-end de votre plateforme de location, au menu Administration - Front-end. Ouvrez l'onglet "Pages".

Cliquez sur l'icône du builder de n'importe quelle page. Vous n'aurez pas besoin de refaire cette procédure sur chaque page, vous allez modifier la feuille de style CSS de manière globale. Dans le builder, cliquez sur l'icône CSS pour éditer le CSS de votre front-end. Collez dans l'éditeur qui s'ouvre la portion de code copiée depuis Google Fonts.

Puis ajoutez le bout de code suivant : body {  font-family: "YYY", sans-serif; } Dans ce bout de code, remplacez YYY par le nom de votre Google Font (par exemple : Montserrat). Vérifiez les informations que vous avez renseignées. Vous devez avoir le rendu suivant : @import url('XXX'); body {   font-family: "YYY", sans-serif; } ==> XXX étant l'URL fournie dans le code copié depuis Google Fonts ==> YYY étant le nom de votre police Google

Une fois les informations vérifiées, cliquez sur le bouton "Fermer". Une notification vous indiquera que votre CSS a été mis à jour. Actualisez une page de votre front-end et constatez le changement de police.