Utiliser des polices dans HubSpot

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 : 

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 : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
  • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
  • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
  • Base de connaissances : Dans votre compte HubSpot, accédez à Contenu > Base de connaissances.
  • E-mail : Dans votre compte HubSpot, accédez à Marketing > E-mail s marketing.
• Cliquez sur le nom de votre contenu. 
• 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. 

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
• Utiliser une police Google Fonts dans un modèle d'e-mail codé personnalisé
• Utiliser une police Google Fonts dans un CTA (version héritée)
• Utiliser une police Google dans un formulaire
• Utiliser une police Google Fonts dans un module personnalisé

Utiliser une police Google Fonts dans une feuille de style

• Copiez le code @import de la police depuis Google Fonts.
• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire 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. 

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

• Copiez le code @import de la police depuis Google Fonts.
• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire 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 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.
• Dans votre compte HubSpot, accédez à Marketing > 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

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Passez le curseur de votre souris sur le nom du formulaire et cliquez sur Actions > Modifier le formulaire ou Créez un 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.

• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire de conception.

• Dans l'outil de recherche à gauche, ouvrez le module personnalisé. Découvrez-en davantage sur la création d'un module personnalisé.
• Dans l'inspecteur à droite, cliquez sur le menu déroulant Ajouter un champ dans la section Champs et sélectionnez Police. Découvrez-en davantage sur l'utilisation de champs de police. 

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

• Accédez à votre contenu :

  • Pages de site web : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
  • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
  • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
• Cliquez sur le nom du contenu utilisant le module personnalisé. 
• 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 charger des fichiers de police, puis les utiliser dans des thèmes ou les appliquer dans des feuilles de style. 

Utiliser des polices personnalisées dans des thèmes

Dans l'éditeur de thèmes, vous pouvez charger 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 : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
  • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
  • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
• Cliquez sur le nom de votre contenu. 
• 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. 

• Cliquez sur le menu déroulant Style de police 1 et sélectionnez le style utilisé par votre fichier de police. Chaque style doit utiliser un fichier de police distinct. 
• 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é. 
• Une fois que vous avez ajouté tous les styles de police applicables, cliquez sur Terminé.

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 : Dans votre compte HubSpot, accédez à Contenu web > Pages de site web.
  • Pages de destination : Dans votre compte HubSpot, accédez à Contenu > Pages de destination.
  • Blog : Dans votre compte HubSpot, accédez à Contenu > Blog.
• Cliquez sur le nom de votre contenu. 
• 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 de deletededel suppression à 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 listé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

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 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.

• Dans votre compte HubSpot, accédez à Bibliothèque > 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. 

• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire 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. 

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.

• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire 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 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

Après avoir ajouté une police personnalisée à votre thème, vous pouvez l'utiliser pour les CTA :

• Dans votre compte HubSpot, accédez à Marketing > CTA.
• Dans l'angle supérieur gauche, cliquez sur le menu déroulant et sélectionnez CTA.
• Survolez un CTA, puis cliquez sur Actions > Modifier. 
• Dans le panneau de gauche de l'éditeur de CTA, cliquez sur l'onglet Conception. 
• Cliquez sur la section Styles pour la développer.
• Cliquez sur le menu déroulant Police principale et sélectionnez votre police personnalisée. 
• Poursuivez la création de votre CTA. 

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

À l'instar des CTA, après avoir téléchargé un fichier de formulaire personnalisé, vous pouvez l'utiliser avec les CTA existants :

• Dans votre compte HubSpot, accédez à Marketing > 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. 

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é. 

• Dans votre compte HubSpot, accédez à Contenu > Gestionnaire 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.