COS-General

Comment ajouter des polices Google à des pages et CTA HubSpot ?

Dernière mise à jour: July 7, 2017

Disponible avec :

Vous pouvez ajouter les tags de lien des polices Google au code HTML d'un titre ou ajouter le code @import en haut de votre fichier CSS. Toutefois, pour cela, vous devez tout d'abord obtenir le script de la police voulue auprès de Google.

 

Copiez le script de votre police Google

  • Accédez au site fonts.google.com et choisissez la police de caractères voulue.
  • Cliquez sur l'icône plus à droite du nom de la police.

  • Cliquez sur le champ 1 Famille choisie qui apparaît au bas de l'écran.
  • Sélectionnez l'onglet @import et copiez le script fourni par Google, par exemple : @import url(http://fonts.googleapis.com/css?family=Open+Sans);

 

Une fois le code copié, vous pouvez revenir sur HubSpot pour appliquer votre police Google.

Ajoutez une police Google à vos pages HubSpot

  • Cherchez la feuille de style appliquée à vos pages. Vous la trouverez dans Contenu > Gestionnaire de conception ou dans l'onglet Paramètres de l'éditeur de page, en consultant la section Paramètres de style.
  • Copiez le code @import sur la première ligne de votre fichier CSS. Il doit absolument être intégré en haut de votre feuille de style CSS.

  • Maintenant que la police Google est intégrée à votre fichier CSS, vous pouvez appliquer cette famille de police comme propriété CSS sur toutes vos pages. En d'autres termes, dans votre feuille de style CSS personnalisée, vous pouvez appliquer la police Google à tous les sélecteurs CSS souhaités, comme dans l'exemple ci-dessous. 

Image ajoutée par l'utilisateur

Ajoutez une police Google à vos CTA

Vous pouvez également utiliser les polices Google sur vos CTA HubSpot :

  • Copiez le code Spécifier dans la CSS depuis les polices Google.

  • Dans HubSpot, accédez à ContenuCTA
  • Cliquez sur l'icône d'engrenage à droite du CTA, puis sur Modifier
  • Allez dans l'onglet Conception, puis cliquez sur Personnaliser la CSS
  • Ajoutez le code Spécifier dans la CSS  issu des polices Google à la section CSS personnalisé, sur la droite. 

  • Revenez à l'onglet Conception et tapez le nouveau texte ou remplacez le texte d'origine de votre CTA afin d'appliquer la nouvelle police Google. 
  • Cliquez sur Mettre à jour le CTA