COS-General

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

Dernière mise à jour: July 5, 2017

Disponible avec :

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. Veuillez noter que les étapes ci-dessous fonctionnent uniquement pour le contenu des pages web, et non pour les modèles d'e-mails. 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 des trois formats de fichiers, il suffit de suivre ces instructions :

  • Accédez à Contenu > Gestionnaire de fichiers.
  • Cliquez sur Charger les fichiers et sélectionnez les fichiers voulus.
  • Accédez à Contenu > Gestionnaire de conception.
  • Ouvrez la feuille CSS appliquée à votre page ou modèle de blog.
  • Dans la partie supérieure de votre feuille CSS, copiez le code @font-face ci-dessous :

@font-face {
  font-family: 'Nom de votre police';
  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.

  • Une fois le code copié, remplacez le code font-family par le nom de votre police.
  • Cliquez sur Actions > Insérer fichier.
  • Cherchez le fichier de la police.
  • Pour obtenir le meilleur affichage possible, sélectionnez le domaine sur lequel votre contenu est hébergé.
  • Cliquez sur Utiliser fichier.
Image ajoutée par l'utilisateur
Image ajoutée par l'utilisateur

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.

@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');
}

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