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.

Utiliser des polices dans HubSpot

Dernière mise à jour: mars 15, 2024

Disponible avec le ou les abonnements suivants, sauf mention contraire :

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 web (comme 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 web

Polices personnalisées

 
Page – Modèles de démarrage Disponible dans l'onglet Styles 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  
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é  
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 (version héritée)  

Remarque : tous les types de contenu ne sont pas disponibles dans tous les comptes. Les types de contenu disponibles pour les abonnements de votre compte HubSpot se trouvent dans le Catalogue des produits et services. 

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 : Depuis votre compte HubSpot, accédez à 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-mail.
  • 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 des polices web

Les polices web sont disponibles par défaut 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.

Si vous êtes un développeur, vous pouvez également utiliser le champ de police pour ajouter des polices web aux thèmes et aux modules personnalisés. Lorsqu'elles sont utilisées de cette manière, les polices web ne sont pas chargées à partir d'un service tiers ; HubSpot les chargera directement sur le domaine du contenu.

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

Vous pouvez également utiliser des services tiers tels que Google Fonts en copiant le code d'import de la police, en le collant dans la feuille de style de du contenu, puis en appliquant la police par le biais de la CSS :

  • 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.
  • Dans l'angle supérieur droit, cliquez sur Publier les modifications pour appliquer les modifications. 
add-google-fonts-imported-font-to-stylesheet

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. En savoir plus sur la sélection des polices par défaut utilisées dans l'éditeur d'e-mail classique
 
Les modèles d'e-mail codés personnalisés ne sont disponibles que dans les comptes Marketing Hub Pro et Entreprise
 
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 inline styling
  • Dans l'angle supérieur droit, cliquez sur Publier les modifications pour appliquer les modifications. 

Utiliser une police Google Fonts dans un CTA (version héritée)

  • Copiez le code de Google pour définir les règles CSS pour cette police.
  • Depuis votre compte HubSpot, accédez à Marketing > Capture de lead > CTA.
  • Survolez un CTA, puis cliquez sur le lien Actions 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. Puis, cliquez sur Enregistrer.

Utiliser une police Google dans un formulaire

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de lead > Formulaires.
  • Survolez le nom du formulaire et cliquez sur Actions > Modifier le formulaire ou Créer un nouveau formulaire.
  • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et Aperçu
  • Dans le menu latéral de gauche, cliquez sur la section Style.
  • Dans la section Texte, cliquez sur le menu déroulant Famille de polices et sélectionnez une police Google
  • Dans l'angle supérieur droit, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

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 : Depuis votre compte HubSpot, accédez à 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

Au lieu d'utiliser des polices web standard ou une bibliothèque de polices comme Google Fonts, vous pouvez télécharger des fichiers de polices, puis les utiliser dans des thèmes ou y faire référence dans des feuilles de style. 

Utiliser des polices personnalisées dans des thèmes

Dans l'éditeur de thèmes, vous pouvez ccharger une police personnalisée, puis utiliser cette police dans les pages et les posts. Les formats de fichiers de police pris en charge sont les suivants : TTF, OTF, WOFF.

Charger des polices personnalisées

  • Accédez à votre contenu :

    • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
    • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
    • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier
  • Dans l'éditeur de contenu, cliquez sur le menu Modifier et sélectionnez Thème : [Nom du thème].
  • Dans le menu latéral de gauche, cliquez sur un menu déroulant de police et sélectionnez Charger une police personnalisée
  • Dans le panneau de droite, saisissez un libellé pour votre police dans le champ Nom de la police
  • Cliquez sur Choisir des fichiers de police et sélectionnez un ou plusieurs fichiers de police, puis cliquez sur Suivant

add-a-custom-font-to-theme

  • Cliquez sur le menu déroulant Style de police 1 et sélectionnez le style utilisé par votre fichier de police. Vous pouvez définir plusieurs styles pour le même fichier de police.
  • Pour ajouter des styles de police supplémentaires, cliquez sur + Ajouter un nouveau style de police, puis ajoutez vos styles de police. Chaque fichier de police chargé doit avoir au moins un style associé. 
  • Lorsque vous avez ajouté tous les styles de police applicables, cliquez sur Done.

Modifier des polices personnalisées

Une fois que vous avez chargé une police personnalisée dans l'éditeur de thèmes, vous pouvez charger d'autres polices, personnaliser les polices existantes avec d'autres styles de polices ou supprimer des polices. 

  • Accédez à votre contenu :

    • Pages de site web : Depuis votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
    • Pages de destination : Depuis votre compte HubSpot, accédez à Marketing > Pages de destination.
    • Blog : Depuis votre compte HubSpot, accédez à Marketing > Site web > Blog.
  • Passez le curseur de votre souris sur votre contenu et cliquez sur Modifier
  • Dans l'éditeur de contenu, cliquez sur le menu Modifier et sélectionnez Thème : [Nom du thème].
  • Dans le menu latéral de gauche, cliquez pour développer la section Polices.
  • Cliquez sur un menu déroulant de police et sélectionnez Gérer les polices personnalisées.
  • Pour ajouter une nouvelle police, cliquez sur Ajouter une police personnalisée dans la boîte de dialogue. 
  • Pour modifier une police :
    • Dans la boîte de dialogue, cliquez sur le menu déroulant Actions à côté de la police et sélectionnez Modifier.
    • Pour modifier le nom de la police, cliquez sur Modifier à côté du nom de la police, puis saisissez un nouveau nom de police
    • Pour ajouter des styles de police supplémentaires, cliquez sur Ajouter un nouveau style de police, puis cliquez sur le menu déroulant Style de police et sélectionnez un style. Cliquez sur Charger, puis chargez un fichier de police. 
    • Pour supprimer un style de police, cliquez sur l'icône deletededel supprimer à côté du style de police. Vous ne pouvez pas supprimer un style de police s'il n'y a pas d'autres styles de police répertoriés. 
    • Cliquez sur Enregistrer
  • Pour supprimer une police, cliquez sur le menu déroulant Actions dans la boîte de dialogue et sélectionnez Supprimer

Remarque : la suppression d'une police la supprime de tous les menus déroulants. Cependant, les fichiers de police resteront dans l'outil Fichiers jusqu'à ce qu'ils y soient supprimés. 


  • Lorsque vous avez terminé de modifier vos polices, cliquez sur Terminé.

Utiliser des polices personnalisées dans des feuilles de style

Au lieu d'utiliser des polices web standard ou une bibliothèque de polices comme Google Fonts, vous pouvez héberger des fichiers de polices dans l'outil files, puis les référencer dans votre feuille de style. 

Remarque : Les polices personnalisées ne sont disponibles que dans les comptes ayant accès au gestionnaire de conception et doivent être appliquées avec des 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. Il est recommandé de télécharger un minimum de versions .woff, .ttf et .eot de la police pour garantir son chargement sur tous les navigateurs 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. Apprenez-en plus sur en travaillant avec des 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 provenant 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. Pour garantir une expérience cohérente à vos lecteurs, il est recommandé d'utiliser les polices Web par défaut dans les e-mails. 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 provenant 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 inline styling
  • Dans l'angle supérieur droit, cliquez sur Mettre à jour ou Publier pour appliquer vos modifications. 

Utiliser une police personnalisée dans un CTA (version héritée)

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

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de lead > CTA.
  • Survolez un CTA, puis cliquez sur Actions 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. Puis, cliquez 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 de blog ou de page personnalisés. Découvrez comment ajouter une police personnalisée à un modèle d'e-mail codé personnalisé

  • 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 provenant 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 Publier les modifications pour appliquer les modifications.

custom-module-custom-font

Cet article vous a-t-il été utile ?
Ce formulaire n'est utilisé que pour recueillir du feedback sur la documentation. Découvrez comment obtenir de l'aide sur HubSpot.