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

Comment appliquer une police de caractères personnalisée dans HubSpot ?

Dernière mise à jour: January 15, 2019

Disponible avec :

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basique
HubSpot CMS

Pour changer des polices web standards et des bibliothèques de polices comme Google Fonts, vous pouvez enregistrer des fichiers de polices dans le gestionnaire de fichiers et les appliquer dans votre feuille CSS.

Afin que ces polices s’affichent correctement dans tous les navigateurs, vous devez disposer de plusieurs formats pour chacune d’elles. Les versions .woff, .ttf et .eot d’une police sont le minimum requis pour obtenir les résultats les plus fiables. Vous devrez également créer des règles @font-face supplémentaires pour différents styles et poids (c.-à-d. oblique, gras, léger, etc.).

Veuillez noter que ces étapes ne fonctionneront que pour le contenu des pages Web et non pour les modèles d’e-mails puisque la plupart des clients de messagerie ne supportent pas les polices personnalisées

Si vous disposez d’une police légalement utilisable sur Internet, l’outil de conversion Font Squirrel peut générer les divers formats nécessaires. Dès que vous disposez de tous vos formats de fichiers, il suffit de suivre ces instructions :

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
  • Ouvrez la feuille de style appliquée à votre page ou modèle de blog.
  • Dans la partie supérieure de votre fichier CSS, collez-y le code @font-face suivant. Vous devrez inclure plusieurs règles si vous importez des fichiers pour plusieurs styles de famille de polices.
@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');}

Vous devez ensuite remplacer les URL de la police dans le bloc du code font-face afin de faire référence à votre police :

  • Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Fichiers.
  • Cliquez sur Charger les fichiers et sélectionnez les fichiers voulus. 
  • Pour obtenir les meilleurs résultats, utilisez le menu déroulant de l’URL du fichier pour sélectionner le domaine sur lequel votre site est hébergé pour l’URL du fichier.
  • Cliquez sur le fichier dans le tableau de bord de votre gestionnaire de fichiers, puis cliquez sur Copier URL pour obtenir l’URL de la police à ajouter à votre feuille de style.

file-manager-change-domain


Dès que vous avez remplacé le code font-family et les URL de la source de la police dans votre code, vous pouvez commencer à appliquer cette police personnalisée dans votre feuille CSS. Ci-dessous, vous trouverez un exemple de code dans lequel la police personnalisée est appliquée au corps d’une page.

/* Jurassic Park Normal */
@font-face {
font-family: ‘Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

/* Jurassic Park Bold */
@font-face {
font-family: ‘Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') format('truetype');
font-weight: 700;
}

body {
font-family: ‘Jurassic Park';
}