Pour des raisons de conformité, vous pouvez utiliser :
- des polices sous licence, ou bien
- des polices hébergées localement et embarquées hors-ligne.
Important:
- Le téléchargement de fichiers de polices dans la base de données média se fait à vos risques et périls. Tout contenu téléchargé dans la base de données média l'est à vos risques et périls et vous devez vérifier si le contenu est protégé par les lois sur les droits d'auteur. Pour plus d'informations, voir Ajouter des polices - FAQ.
- Même si certaines polices web en ligne ont prouvé qu'elles fonctionnaient, nous ne les prenons pas en charge pour des raisons de protection des données relatives aux transferts de données en-dehors de l'Espace Économique Européen.
Ajouter une forme de police personnalisée à un modèle
Voici comment ajouter des polices personnalisées à votre modèle :
Pré-requis :
- Vous devez héberger la police sur votre serveur (par exemple, sur le serveur où est hébergé votre site web).
- Avant de télécharger des polices personnalisées sur votre serveur, il est important de vérifier les conditions applicables à la police (par exemple, s'il est permis de télécharger la police sur votre serveur).
- Une fois les polices téléchargées sur votre serveur, procédez comme suit :
a. Naviguez vers Contenu > Modèles basés sur les blocs.
b. Passez votre souris sur le modèle que vous souhaitez mettre à jour et cliquez sur Modifier.
c. Ouvrez l'onglet Éditeur de style et ajoutez-les à votre modèle en utilisant la méthode @font-face.
En général, vous pouvez ajouter deux graisses de police pour chaque police et leurs versions italiques si elles sont disponibles :
font-weight: 400 or normal
font-style: normal
font-weight: 400 or normal
font-style: italic
font-weight: 700 or bold
font-style: normal
font-weight: 700 or bold
font-style: italic
Exemple de code :
@font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:italic; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Italic.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:italic; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Italic.woff2) format('woff2'); }Dans l'exemple ci-dessus, la police avec font-weight : 400/normal sera affiché lorsqu'il s'agit d'un texte normal et que la police a font-weight: 700/bold sera affiché si le texte est en gras.
Vous pouvez utiliser les formats de fichiers de polices suivants : .woff, .woff2, .otf, .eot, .ttf (les formats de police .woff et .woff2 sont les plus répandus).
En fonction du format du fichier de police, vous devez modifier la partie format du CSS comme suit :
- Format du fichier de police : .woff - Format à définir dans le CSS :
format('woff') - Format du fichier de police : .woff2 - Format à définir dans le CSS :
format('woff2') - Format du fichier de police : .otf - Format à définir dans le CSS :
format('opentype') - Format du fichier de police : .eot - Format à définir dans le CSS :
format('embedded-opentype') - Format du fichier de police : .ttf - Format à définir dans le CSS :
format('truetype')
Si plusieurs formats de fichiers de polices sont disponibles, vous pouvez les intégrer comme suit :
@font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff) format('woff'), url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.otf) format('opentype'); }- Pour intégrer des graisses de police autres que 400/normal et 700/bold, modifiez les chemins d'accès aux polices liés.
Dans ce cas, vous devez quand même intégrer les polices en tant que font-weight:400 et font-weight:700.
Dans l'exemple suivant, nous avons implémenté les graisses de police 300 et 800 dans les chemins de police :
@font-face { font-family:'Web Font'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:italic; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_300_Font_Style_Italic.woff2) format('woff2'); } @font-face { font-family:'Web Font'; font-style:italic; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Italic.woff2) format('woff2'); }Dans l'exemple ci-dessus, la police font-weight:300 sera affichée lorsqu'il s'agit d'un texte normal, et la police font-weight:800 sera affichée lorsque le texte sera mis en gras. Veuillez noter que la police de remplacement sera toujours affichée avec font-weight:400 / normal et font-weight:700 / bold.
- Pour mettre en œuvre plus de deux graisses de police pour une police, étendez les noms de police.
Dans l'exemple suivant, nous avons implémenté les graisses de police 100, 400, 700 et 800 (pour raccourcir l'exemple, nous n'avons pas défini les versions italiques dans ce cas) :
@font-face { font-family:'Web Font - Thin'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_100_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Thin'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Regular'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Regular'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_700_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Extra Bold'; font-style:normal; font-weight:400; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_400_Font_Style_Normal.woff2) format('woff2'); } @font-face { font-family:'Web Font - Extra Bold'; font-style:normal; font-weight:700; font-display:swap; src:url(https://www.yoursite.com/fonts/Webfont_Font_Weight_800_Font_Style_Normal.woff2) format('woff2'); }- Vérifiez que votre modèle contient la variable
ff.
La variable ff n'est pas disponible dans tous les modèles, mais seulement dans ceux créés par Emarsys (à partir de 2018/2019) ou dans les modèles qui sont basés sur nos modèles de base (c.-à-d. Étiquettes de style de vie et modèle de présentation universelle du contenu).
- Si la variable
ffn'est pas disponible, vous pouvez définir la police en utilisant inline-style dans la balise ou une classe CSS :- Exemple 1 - Définition de la police de caractères à l'aide du style inline :
<font style="font-family:'Web Font', Arial, Helvetica, sans-serif;">Text</font> - Exemple 2 - Définition de la police de caractères à l'aide d'une classe CSS : Dans ce cas, vous devez également définir la classe dans l' Éditeur de style du modèle :
.webfont {font-family:'Web Font', Arial, Helvetica, sans-serif;}- Définissez la police dans le bloc en utilisant la classe CSS dans la balise HTML :
<font class="webfont">Text</font>
- Définissez la police dans le bloc en utilisant la classe CSS dans la balise HTML :
- Exemple 1 - Définition de la police de caractères à l'aide du style inline :
- Si la variable
ffest disponible, après avoir implémenté les polices, ajoutez-les à la variableff, y compris une pile de polices complète avec des polices de repli.
Notes :
- Diverses polices de remplacement (y compris leur distribution sur Windows et macOS) peuvent être trouvées ici : https://www.cssfontstack.com/
- Il est recommandé de spécifier d'abord le nom de la police personnalisée, suivi d'une police de secours pour Windows, d'une autre pour macOS et de la police par défaut avec ou sans empattement. Cela signifie que toute police avec ou sans empattement disponible sera affichée si les polices web ne peuvent pas être affichées (non prises en charge) ou si les polices de repli définies ne sont pas disponibles.
Dans l'exemple suivant, vous pouvez voir les valeurs mises en œuvre pour deux graisses de police :
Item name: Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font', Arial, Helvetica, sans-serif
Dans l'exemple suivant, vous pouvez voir les valeurs mises en œuvre pour plusieurs graisses de police (c'est-à-dire les graisses de police 100, 400, 700 et 800) :
Item 1
Item name: Web Font - Thin, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Thin', 'Web Font', Arial, Helvetica, sans-serif
Item 2
Item name: Web Font - Regular, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Regular', 'Web Font', Arial, Helvetica, sans-serif
Item 3
Item name: Web Font - Extra Bold, Web Font, Arial, Helvetica, sans-serif
Item value: 'Web Font - Extra Bold', 'Web Font', Arial, Helvetica, sans-serif
Voici à quoi ressemble la variable ff dans ce cas :
- Après avoir implémenté la police dans l'éditeur de style du modèle et dans la variable
ff, mettez à jour les campagnes existantes pour que la police apparaisse.
Lors de l'utilisation de polices web (implémentées via une variable), sélectionnez la police dans les Paramètres de style des blocs au lieu de l'outil d'édition de texte VCE. Si vous modifiez la police dans l'outil d'édition de texte VCE, les modifications ne seront pas appliquées et vous devrez peut-être réinitialiser le bloc (c'est-à-dire le recréer).
N'utilisez pas l'outil d'édition de texte VCE pour modifier la police, en particulier lorsque vous définissez des polices Web. Si vous utilisez l'outil d'édition de texte VCE pour définir les polices, aucune police de secours ne sera définie, de sorte que dans certains cas, n'importe quelle police par défaut sera affichée (par exemple, Times New Roman ou Arial) si les polices web ne peuvent pas être affichées ou si la police sélectionnée n'est pas disponible.
Après avoir modifié la police à l'aide de l'outil d'édition de texte VCE, les paramètres appliqués dans Paramètres de style des blocs n'auront aucun effet. Cela signifie que vous devez réinitialiser le bloc ou en créer un nouveau.