Utilisez des polices personnalisées sur les articles de blog ou les pages
Dernière mise à jour: mars 18, 2021
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.
L'ajout d'une police personnalisée n'ajoute pas cette police aux options de police de caractère dans les éditeurs HubSpot. Vous devez utiliser du code CSS pour mettre en forme les textes de vos pages avec cette police.
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.).
Remarque : il est impossible d'utiliser des polices personnalisées dans les éléments suivants :
- Modèles d'e-mails ; la plupart des clients de messagerie ne prennent pas en charge les polices personnalisées.
- Pages conçues à l'aide de modèles de démarrage.
Pour ajouter des polices personnalisées à vos feuilles de style, chargez vos fichiers de polices dans l'outil Fichiers
- 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 de 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 panneau de droite, cliquez sur Copier l'URL pour obtenir l'URL de la police à ajouter à votre feuille de style.
- Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.
- Ouvrez la feuille de style appliquée à votre modèle de blog ou de page.
- Dans la partie supérieure de votre feuille de style, collez le code @font-face suivant. Incluez 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');}
- Remplacez your_font_file.xxx? par l'URL provenant de l'outil Fichiers. Répétez cette opération pour chaque format.
- Remplacez 'Your Font Name' par le nom de votre police personnalisée.
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 *//* Jurassic Park Bold */
@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');
}
@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';
}
Articles similaires
-
Créer des modèles de page, d'e-mail et de blog dans l'éditeur de mise en page
Utilisez le gestionnaire de conception de HubSpot pour créer des modèles à l'aide de modules à glisser et...
Base de connaissances -
Ajoutez le code Google Tag Manager à vos pages
Vous pouvez intégrer Google Tag Manager avec HubSpot pour gérer le suivi de plusieurs sources depuis un seul...
Base de connaissances -
Personnaliser votre contenu
Grâce aux jetons de personnalisation, vous pouvez afficher le contenu personnalisé à vos contacts en fonction...
Base de connaissances