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 les polices de caractères dans HubSpot

Dernière mise à jour: septembre 27, 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 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 Google Fonts

Polices personnalisées

 
Page - modèles de démarrage Disponible dans l' ongletConception de l'éditeur de contenu Non disponible  
Page - modèles de thèmes 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 par 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 sur la page Onglet Conception de l'éditeur de modèles Non disponible  
Module personnalisé Disponible pour les modules personnalisés non utilisés dans les emails Disponible pour les modules personnalisés non utilisés dans les emails  
CTA  

Utiliser les 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 riche, 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

    • Livre Antiqua*

    • Courier New

    • Georgia

    • Helvetica

    • Impact*

    • Lato**
    • Merriweather**
    • Monaco*
    • Symbole*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*Non disponible dans l'éditeur de courrier électronique par glisser-déposer.  

**Uniquement disponible en tant que police web dans l'éditeur de courrier électronique par glisser-déposer.

Utilisez les polices Google

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'importation 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 aux thèmes et aux modules personnalisés, consultez la documentation destinée aux développeursde 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 une liste des styles disponibles à l'importation.
  • A côté de chaque style que vous voulez importer, cliquez sur + Sélectionner ce style
  • Dans le panneau de droite, sélectionnez @import dans la section Use on the web
  • Copiez le code de la police : 
    • Dans la section Utilisation sur le web , copiez le code @import sans la <style> balise.
    • 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 Font 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 le finder, ouvrez la feuille de style utilisée pour votre contenu.
  • Collez le code @import à 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 le coin supérieur droit, cliquez sur Publier ou Mettre à jour pour mettre vos modifications en ligne. 

Utiliser une police Google Font dans un modèle d'email codé personnalisé

Bien que les polices Google soient 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 clients de messagerie populaires 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-mails classique mis à jour 
 
Pour ajouter une police Google Font à 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 le finder, ouvrez le modèle d'email codé personnalisé.
  • Dans lasection<head> du modèle, collez le code @import entre les balises <style>....</style>
  • Dans le code du corps du courriel, ajoutez la police personnalisée dans le style en ligne
  • En haut à droite, cliquez sur Mettre à jour ou Publier pour mettre vos modifications en ligne. 

Utilisez une police Google 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 la souris 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 le coin inférieur droit, cliquez sur Suivant. Cliquez ensuite sur Enregistrer

Utiliser une police Google Font dans un module personnalisé

Veuillez noter que 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.

champ de clic-add

  • En haut à droite, cliquez sur Publier les modifications pour mettre vos modifications en ligne
  • 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 du champ Police et sélectionnez une police Google

Utilisez des polices personnalisées

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 fichiers, puis les référencer dans votre feuille de style. 

Veuillez noter les polices personnalisées doivent être appliquées via CSS. L'ajout d'une police personnalisée n' ajoutera pasla 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 s'assurer que votre police se charge 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 Télécharger les 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 référencer dans une feuille de style. Chaque style de police (italique, gras, etc.) nécessite une règle @font-face distincte. En savoir plus sur l' utilisation des feuilles de style dans HubSpot

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans le finder, 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 le nom de votre police par le nom de la police.
    • Remplacez votre_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. 
  • En haut à droite, cliquez sur Mettre à jour ou Publier pour mettre vos modifications en ligne. 

sample-custom-font-in-stylesheet

Utiliser une police personnalisée dans un modèle d'email 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, utiliser les polices web par défaut dans les courriels est recommandée. Toutefois, si vous souhaitez ajouter une police personnalisée à un modèle d'e-mail codé, vous pouvez le faire une fois que vous avez ajouté la police personnalisée à l'outil de fichiers.

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Dans le finder, ouvrez le modèle d'email codé personnalisé.
  • Pour chaque style de police :
    • Dans la <head> section du modèle, collez ce code entre les balises</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 le nom de votre police par le nom de la police.
    • Remplacez votre_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 du courriel, ajoutez la police personnalisée dans le style en ligne
  • En haut à droite, cliquez sur Mettre à jour ou Publier pour mettre vos modifications en ligne. 

Utiliser une police personnalisée dans un CTA

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

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > CTA.
  • Passez la souris 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 le nom de votre police par le nom de la police
  • Dans le coin 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 le finder, 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 le nom de votre police par le nom de la police.
  • Remplacez votre_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. 

module-custom-font

  • En haut à droite, cliquez sur Publier les modifications pour mettre vos modifications en ligne.