Vérifier le paramétrage des polices spéciales

Ce tutoriel a pour but de vous expliquer comment vérifier si vos polices spéciales sont correctement hébergées. Si vos polices sont mal hébergées, des erreurs spécifiques apparaîtront dans le contrôle qualité de l’Email Builder. Nous allons vous apprendre à les identifier.

Attention

Les polices doivent être hébergées au format .woff sur un serveur de type HTTPS. Sur ce serveur, les droits CORS doivent être activés et le Content-Type doit être renseigné. Une fois la police intégrée à l’email, c’est au niveau du CSS que la police est déclarée.

Lexique à connaître

Voici quelques termes à connaitre pour bien comprendre l'hébergement des polices spéciales.

  • Serveur de type HTTPS : Le HTTPS est un protocole permettant de sécuriser les échanges entre un serveur et un client.
  • Format .woff : Il s'agit d'un format de police de caractère compressé pour un usage sur les sites web, idéal pour l'utilisation dans un email. Le .woff2 format est également accepté.
  • Droit CORS (Cross-Origin Resource Sharing) : Droits appliqués au serveur permettant l'accès à la police par les lecteurs. Les droits CORS s'appliquent via l'ajout d'un en-tête HTTP sur le serveur.
  • Content-Type : En-tête permettant de déclarer le type de fichier qui est hébergé (ici, par exemple, un fichier de police). Ce Content-Type est composé d'un MIME Type et d'autres informations.

Les erreurs remontées par le contrôle qualité

  • L'en-tête Content-Type n'est pas valide : Dans ce cas la valeur du CONTENT-TYPE n’est pas correct. Pour rappel celui-ci doit être de type "font" ou "woff​."
  • L'en-tête HTTP CORS est manquante : Les droits CORS n’ont pas été appliqués sur le serveur.
  • Protocole non sécurisé : Le serveur n’est pas sécurisé et ne génère pas de lien de type https.​

Appliquer et renseigner les droits CORS & le CONTENT-TYPE

Les droits CORS et le Content-Type sont en réalité des en-têtes HTTP à renseigner au niveau du serveur. Voici le lien qui vous permettra de suivre le processus à suivre en fonction du type de serveur : https://enable-cors.org/server.html.

L’idée est d’appliquer, au niveau du fichier (ou dossier) où se trouve la police, un commentaire spécifique qui permettra d’appliquer les droits CORS et le Content-Type.

Exemple :

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

Vérifier les paramètres de la police à partir du lien d'hébergement

Etape 1 : Copiez et collez le lien de la police dans votre navigateur.

7.2.6_2_FR.png

Etape 2 : Ouvrez l'inspecteur.

7.2.6_3_FR.png

Etape 3 : Accédez à l'onglet Network > All.

7.2.6_4_FR.png

Etape 4 : Allez dans la barre de recherche où l’URL se trouve et appuyez sur "Entrée".
La police se télécharge et une ligne d’information la concernant apparait dans l’inspecteur.

7.2.6_5_FR.png

Etape 5 : Cliquez sur cette nouvelle ligne d'information, et plusieurs informations s'affichent :

7.2.6_6_FR.png

Etape 6 : Les informations pertinentes figurent dans les HEADERS :

7.2.6_7_FR.png

Etape 7 : Vérifier la présence des droits CORS : retrouvez l’intitulé « Access-Control-Allow-Origin: » si celui-ci est suivi d’un astérisque, les droits sont bien appliqués.

7.2.6_8_FR.png

Etape 8 : Vérifier la valeur du CONTENT-TYPE : retrouvez l’intitulé « CONTENT-TYPE ». Pour rappel la valeur associée doit être font/woff.

7.2.6_9_FR.png

Vous êtes maintenant en mesure de comprendre et vérifier si vos polices spéciales sont correctement hébergées, si vous avez un doute n'hésitez pas à contacter le support.