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 : 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 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 restitue directement sur le domaine sur lequel la page se charge.

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 la page, 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
• 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.
• 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 ou sur Mettre à jour 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.
• 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 dans un formulaire

• Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > 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.

• Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils 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 : 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 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. 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. 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. 

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. 

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