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

Utilisez des polices personnalisées sur les articles de blog ou les pages

Dernière mise à jour: octobre 1, 2019

Disponible avec :

Hub Marketing 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 de style.

Afin que ces polices s’affichent correctement dans tous les navigateurs, vous devez disposer de plusieurs formats pour chacune d’elles. Il est recommandé d’inclure un minimum de versions .woff, .ttf et .eot de la police. 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. 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.). 

Note : ces étapes ne fonctionneront que pour les modèles d’articles de blog et de pages web, et non pour les modèles d’e-mails, car la plupart des clients de messagerie ne supportent pas les polices personnalisées

@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, cliquez sur le menu déroulant URL du fichier et sélectionnez le domaine sur lequel votre site est hébergé.
  • Dans le tableau de bord du gestionnaire de fichiers, cliquez sur le nom du fichier de police.
  • Dans le volet droit, cliquez sur Copier l’URL pour obtenir l’URL de la police à ajouter à votre feuille de style.

file-manager-change-domain

Après avoir remplacé la famille de polices et les URL des sources de polices dans votre code, vous pouvez faire référence à la famille de polices personnalisée dans votre feuille de style. 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';
}