Ignorer et passer au contenu principal
Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Landing Pages

Utiliser des polices dans HubSpot

Dernière mise à jour: octobre 15, 2021

Disponible avec :

Tous les produits et les abonnements

Les polices disponibles pour le contenu dans HubSpot dépendent du type de contenu et du type de police. Certaines polices par défaut sont disponibles dans tous les éditeurs de contenu, tandis que les polices Google Fonts et les polices personnalisées font l'objet de restrictions supplémentaires, décrites ci-dessous : 

Type de contenu Type de police  
  Polices par défaut Polices Google Fonts

Polices personnalisées

 
Page – Modèles de démarrage Disponible dans l'onglet Conception de l'éditeur de contenu Non disponible  
Page – Modèles de thème Disponible dans les paramètres du thème et via la feuille de style Disponible via la feuille de style  
Page – Modèle codé Disponible via une feuille de style ou un module personnalisé Disponible via la feuille de style  
Blog Disponible via une feuille de style ou un module personnalisé Disponible via la feuille de style  
E-mail Certaines polices par défaut ne sont pas disponibles dans l'éditeur d'e-mails en glisser-déposer Disponible uniquement pour les modèles d'e-mails codés personnalisés ; non pris en charge par la plupart des clients de messagerie Disponible uniquement pour les modèles d'e-mails codés personnalisés ; non pris en charge par la plupart des clients de messagerie  
Base de connaissances Disponible dans l'onglet Conception de l'éditeur de modèles Non disponible  
Module personnalisé Disponible pour les modules personnalisés non utilisés dans les e-mails Disponible pour les modules personnalisés non utilisés dans les e-mails  
CTA  

Utiliser des polices par défaut

Les polices par défaut peuvent être utilisées dans tous les types de contenu et sont conçues pour se charger sur la plupart des plateformes et des appareils. 

  • Accédez à votre contenu :

    • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
    • Pages de destination : Dans votre portail HubSpot, naviguez vers Marketing > Pages de destination.
    • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
    • Base de connaissances : Depuis votre compte HubSpot, accédez à Service client > Base de connaissances.
    • E-mail : Depuis votre compte HubSpot, accédez à Marketing > E-mails.
  • Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier
  • Dans l'éditeur de contenu, cliquez sur un module de texte enrichi, puis mettez en surbrillance le texte que vous souhaitez modifier.
  • Dans la barre d'outils de texte enrichi, cliquez sur le menu déroulant Police et sélectionnez une police. Les polices suivantes sont disponibles dans les modules de texte enrichi.
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Non disponible dans l'éditeur d'e-mails en glisser-déposer  

*Uniquement disponible comme police web dans l'éditeur d'e-mails en glisser-déposer

Utiliser les polices Google Fonts

Les polices Google Fonts sont disponibles dans l'éditeur de contenu pour les pages utilisant des modèles et des thèmes de démarrage, ainsi que pour les articles de la base de connaissances et les modules personnalisés. Pour utiliser une police Google dans d'autres pages, vous devrez copier le code d'import de la police, le coller dans la feuille de style de la page, puis appliquer la police avec des règles CSS.

Pour en savoir plus sur la façon dont les développeurs peuvent utiliser les champs de police pour ajouter des polices Google Fonts aux thèmes et aux modules personnalisés, consultez la documentation destinée aux développeurs de HubSpot. 

Remarque : Les polices Google Fonts ne peuvent pas être sélectionnées dans le menu déroulant des polices de l'éditeur de texte enrichi. 

  • Accédez à fonts.google.com.
  • Dans la barre de recherche, saisissez un nom de police
  • Cliquez sur le nom de la police pour afficher la liste complète des styles qui peuvent être importés.
  • À côté de chaque style que vous souhaitez importer, cliquez sur + Sélectionner ce style.
  • Dans le panneau de droite, sélectionnez @import dans la section Utiliser sur le web
  • Copiez le code de la police : 
    • Dans la section Utiliser sur le web, copiez le code @import sans la balise <style>.
    • Dans le champ Règles CSS pour spécifier les familles, copiez le code pour définir les règles CSS. 

copy-google-font

Une fois que vous avez obtenu le code de Google Fonts, vous pouvez ajouter la police à votre contenu HubSpot : 

Utiliser une police Google Fonts dans une feuille de style

  • Copiez le code @import de la police depuis Google Fonts.
  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, ouvrez la feuille de style utilisée pour votre contenu.
  • Collez le code @import dans la ligne 1 de la feuille de style.
  • Ajoutez le code permettant de définir les règles CSS aux sélecteurs appropriés dans la feuille de style. 
add-google-fonts-imported-font-to-stylesheet
  • Dans l'angle supérieur droit, cliquez sur Publier ou sur Mettre à jour pour appliquer les modifications. 

Utiliser une police Google Fonts dans un modèle d'e-mail codé personnalisé

Si les polices Google Fonts sont prises en charge par Apple Mail et quelques autres clients de messagerie, la prise en charge générale est limitée et la plupart des principaux clients de messagerie ne prennent en charge que les polices web par défaut.Découvrez-en davantage sur la sélection des polices par défaut utilisées dans l'éditeur d'e-mails classique mis à jour 
 
Pour ajouter une police Google Fonts à un modèle d'e-mail codé personnalisé : 
  • Copiez le code @import de la police depuis Google Fonts.
  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, ouvrez le modèle d'e-mail codé personnalisé.
  • Dans la section <head> du modèle, collez le code @import entre les balises <style>...</style>.
  • Dans le code du corps de l'e-mail, ajoutez la police personnalisée dans le style en ligne
  • Dans l'angle supérieur droit, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

Utiliser une police Google Fonts dans un CTA

  • Copiez le code de Google pour définir les règles CSS pour cette police.
  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > CTA.
  • Passez le curseur sur un CTA, puis cliquez sur le menu déroulant Actions et sélectionnez Modifier.
  • Dans le panneau de droite, cliquez sur Options avancées.
  • Dans la zone de texte, collez le code de Google permettant de définir les règles CSS pour cette police
  • Dans l'angle inférieur droit, cliquez sur Suivant. Cliquez ensuite sur Enregistrer.

Utiliser une police Google Fonts dans un module personnalisé

Remarque : Les polices Google Fonts ne sont pas disponibles pour les modules personnalisés utilisés dans les modèles d'e-mails.


  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.

click-add-field

  • Dans l'angle supérieur droit, cliquez sur Publier les modifications pour appliquer les modifications.
  • Accédez à votre contenu :

    • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
    • Pages de destination : Dans votre portail HubSpot, naviguez vers Marketing > Pages de destination.
    • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Passez la souris sur le contenu utilisant le module personnalisé et cliquez sur Modifier
  • Dans l'éditeur de contenu, cliquez sur le module personnalisé
  • Dans l'éditeur de la barre latérale, cliquez sur le menu déroulant Champ de police et sélectionnez une police Google

Utiliser des polices personnalisées

Pour changer des polices web standards et des bibliothèques de polices comme Google Fonts, vous pouvez enregistrer des fichiers de police dans l'outil Fichiers, puis les appliquer dans votre feuille de style. 

Remarque : Les polices personnalisées doivent être appliquées via CSS. L'ajout d'une police personnalisée n'ajoutera pas la police aux menus déroulants de style dans l'éditeur de contenu.

Pour utiliser une police dans un contenu, téléchargez les fichiers de la police dans l'outil Fichiers. HubSpot recommande de télécharger un minimum de versions .woff, .ttf et .eot de la police pour garantir son chargement sur tous les navigateurs

s. Vous pouvez utiliser le mode Expert de l'outil de conversion de Font Squirrel pour générer des formats de fichiers supplémentaires.

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Fichiers.
  • Cliquez sur Charger des fichiers
  • Sur le disque dur de votre ordinateur, sélectionnez les fichiers de police, puis cliquez sur Ouvrir
  • Cliquez sur le nom d'un fichier de police téléchargé. 
  • Dans le panneau de droite, cliquez sur Copier l'URL pour copier l'URL où le fichier est hébergé. Vous aurez besoin de l'URL de la police dans chaque format de fichier. 

Utiliser une police personnalisée dans une feuille de style

Une fois que vous avez ajouté une police personnalisée à l'outil Fichiers, vous pouvez la mentionner dans une feuille de style. Chaque style de police (italique, gras, etc.) nécessite une règle @font-face distincte. Découvrez-en davantage sur l'utilisation de feuilles de style dans HubSpot

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, ouvrez la feuille de style utilisée pour votre contenu.
  • Pour chaque style de police :
    • En haut de la feuille de style, collez le code suivant :  
@font-face { font-family: 'Your Font Name';  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • Remplacez Your Font Name par le nom de votre police.
    • Remplacez your_font_file.xxx? par l'URL de l'outil Fichiers. Répétez l'opération pour chaque format de fichier.
  • Créez des règles CSS avec la propriété font-family pour appliquer la police personnalisée. 
  • Dans l'angle supérieur droit, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

sample-custom-font-in-stylesheet

Utiliser une police personnalisée dans un modèle d'e-mail codé personnalisé

Les polices personnalisées ne sont pas prises en charge dans la plupart des clients de messagerie populaires. Afin de garantir une expérience cohérente pour vos lecteurs, l'utilisation de polices web par défaut dans les e-mails est recommandée. Toutefois, si vous souhaitez ajouter une police personnalisée à un modèle d'e-mail codé personnalisé, vous pouvez le faire une fois que vous aurez ajouté la police personnalisée à l'outil Fichiers.

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, ouvrez le modèle d'e-mail codé personnalisé.
  • Pour chaque style de police :
    • Dans la section <head> du modèle, collez ce code entre les balises <style>...</style> :
@font-face { font-family: 'Your Font Name';  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • Remplacez Your Font Name par le nom de votre police.
    • Remplacez your_font_file.xxx? par l'URL de l'outil Fichiers. Répétez l'opération pour chaque format de fichier.
  • Dans le code du corps de l'e-mail, ajoutez la police personnalisée dans le style en ligne
  • Dans l'angle supérieur droit, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

Utiliser une police personnalisée dans un CTA

Une fois que vous avez ajouté une police personnalisée à l'outil Fichiers, vous pouvez l'utiliser dans des CTA : 

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > CTA.
  • Passez le curseur sur un CTA, puis cliquez sur le menu déroulant Actions et sélectionnez Modifier.
  • Dans le panneau de droite, cliquez sur Options avancées.
  • Dans la zone de texte, collez ce code : 

font-family: 'Your Font Name';

  • Remplacez Your Font Name par le nom de votre police
  • Dans l'angle inférieur droit, cliquez sur Suivant. Cliquez ensuite sur Enregistrer

set-custom-font-for-cta

Utiliser une police personnalisée dans un module personnalisé

Une fois que vous avez ajouté une police personnalisée à l'outil Fichiers, vous pouvez l'utiliser dans des modules personnalisés : 

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans l'outil de recherche, ouvrez le module personnalisé.
  • Dans la section module.css, collez le code suivant : 
@font-face { font-family: 'Your Font Name';  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
  • Remplacez Your Font Name par le nom de votre police.
  • Remplacez your_font_file.xxx? par l'URL de l'outil Fichiers. Répétez l'opération pour chaque format de fichier.
  • Créez des règles CSS avec la propriété font-family pour appliquer la police personnalisée. 

custom-module-custom-font

  • Dans l'angle supérieur droit, cliquez sur Publier les modifications pour appliquer les modifications.