Comment utiliser Google Fonts dans un template PDFMonkey ?

Copiez la balise depuis Google Fonts et collez-la en haut de votre onglet HTML, puis référencez la famille de polices dans votre CSS. Le chargement de polices par URL nécessite un forfait PDFMonkey payant.

Peut-on utiliser des polices personnalisées dans les en-têtes et pieds de page PDFMonkey ?

Oui, mais vous devez intégrer la police en tant que data URI Base64 dans une balise dans les paramètres d’en-tête/pied de page. Les URL de polices externes ne fonctionnent pas dans les en-têtes et pieds de page via les paramètres.

Comment afficher des emojis dans un PDF PDFMonkey ?

L’affichage des emojis est désactivé par défaut. Ouvrez votre template, allez dans l’onglet Paramètres et activez l’option emoji. Une fois activée, les caractères emoji dans votre template ou vos données dynamiques s’afficheront dans le PDF.

Comment afficher des caractères non-latins comme le chinois ou l’arabe dans PDFMonkey ?

Importez une police web qui prend en charge le jeu de caractères dont vous avez besoin. Google Fonts propose des polices pour l’arabe, le chinois, le japonais, le cyrillique, l’hébreu et de nombreux autres scripts. La police Open Sans par défaut ne couvre que les caractères latins de base.

Polices web

Les polices personnalisées vous permettent d’harmoniser votre identité de marque et de prendre en charge les scripts non-latins dans vos templates PDFMonkey. Cette page couvre l’import de polices, l’utilisation de polices d’icônes, l’intégration des polices dans les en-têtes et pieds de page, la gestion des caractères spéciaux et l’activation des emojis.

Compte payant uniquement

Le chargement de polices externes via URL (y compris Google Fonts) n’est possible que sur un compte payant. Les Documents incluant des polices externes échoueront sur un compte gratuit. Consultez Ressources externes pour plus de détails.

En alternative, les utilisateurs du plan gratuit peuvent embarquer les polices en utilisant data-URI. Voir le tutoriel d’intégration des polices dans les en-têtes et pieds de page pour un exemple de cette technique.

Utiliser Google Fonts

Pour importer une police depuis Google Fonts, rendez-vous sur https://fonts.google.com/ et recherchez une police qui vous plaît. Une fois trouvée, vous pouvez sélectionner une ou plusieurs variantes (graisse, italique, etc.) que vous souhaitez utiliser.

Dans le panneau de droite, vous obtiendrez un code <link> que vous pouvez copier en haut de votre HTML.

Importons Roboto en sélectionnant ses styles regular et bold par exemple :

<!-- Import de Roboto, regular et bold -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Une fois la police ajoutée, vous pouvez l’utiliser dans votre CSS :

body {
  font-family: 'Roboto';
}

Autres services de polices

Vous pouvez également utiliser tout service d’hébergement de polices payant auquel vous êtes abonné ou simplement utiliser des polices auto-hébergées.

Dans ces cas, importez les polices en utilisant une balise <link> pointant vers la CSS de la police. Cette CSS et les fichiers de police doivent être accessibles publiquement, sinon ils ne se chargeront pas dans PDFMonkey.

Polices d’icônes

PDFMonkey prend en charge les polices d’icônes comme Font Awesome ou Material Icons. Veuillez vous référer à la documentation de la police que vous souhaitez utiliser pour apprendre comment l’importer.

Polices dans les en-têtes et pieds de page

Comme indiqué dans notre documentation sur les en-têtes et pieds de page, les en-têtes et pieds de page comportent certaines limitations. Puisque le contenu de l’onglet CSS ne s’applique pas à l’intérieur de l’en-tête et du pied de page, les polices ne s’appliqueront pas non plus.

Cela dit, il existe une solution plutôt technique que vous pouvez utiliser pour mettre votre en-tête et pied de page au même niveau que le reste du contenu.

Étape 1 : Obtenir la CSS des polices

Sélectionnez les polices que vous souhaitez sur Google Fonts, puis récupérez l’URL fournie et copiez son contenu. Prenons la police Dancing Script et sélectionnons uniquement sa variante Regular 400. L’URL que nous obtenons est https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap

En visitant cette URL, le contenu que nous obtenons est le suivant :

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Vous pouvez commencer par copier ce contenu.

Ne gardez que ce dont vous avez besoin

Sauf si vous avez besoin des caractères vietnamiens ou latins étendus, vous pouvez ne garder que la section « latin ». Elle couvrira l’alphabet de base plus la plupart des alphabets et accents d’Europe occidentale.

Étape 2 : Remplacer les URLs des polices par leur contenu data-URI

Puisque les polices ne peuvent pas être chargées depuis une URL dans l’en-tête et le pied de page, vous devrez remplacer l’URL Google Fonts par une version data-URI.

Vous pouvez trouver d’excellents convertisseurs en ligne qui feront cela pour vous. Certains prennent simplement une URL en entrée et vous donneront la version data-URI en retour.

Vous pouvez maintenant remplacer l’URL par le texte data-URI que vous avez obtenu.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:font/woff;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Attention aux guillemets

Remarquez que lors du remplacement de l’URL, nous avons également entouré le contenu de guillemets. N’oubliez pas de le faire.

Étape 3 : Remplacer le schéma data-URI

En l’état, la police ne fonctionnera pas et la génération échouera. Pour la faire fonctionner, nous devrons retirer ce qu’on appelle le type MIME du contenu data-URI. Retirez simplement tout ce qui se trouve entre data: et ;base64.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Étape 4 : Donner du style à votre en-tête/pied de page

Maintenant que notre CSS de polices fonctionne, vous pouvez l’ajouter à votre template. Rendez-vous dans l’onglet Paramètres et activez l’en-tête/pied de page Avancé.

Vous pouvez ensuite coller votre CSS de police dans une balise <style> :

<style>
  /* latin */
  @font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  #header, #footer {
    font-family: 'Dancing Script';
  }
</style>

<div>Ce texte devrait utiliser Dancing Script</div>

Les styles d’en-tête et de pied de page sont partagés

Vous n’avez pas besoin de dupliquer l’import de police dans l’en-tête et le pied de page car tout style défini dans l’un s’applique également à l’autre. C’est pourquoi nous pouvons utiliser le sélecteur #header, #footer dans l’exemple ci-dessus.

Emojis

PDFMonkey peut afficher des emojis dans les PDF générés. Cette fonctionnalité est désactivée par défaut et doit être activée pour chaque template.

Pour activer le rendu des emojis, ouvrez votre template et rendez-vous dans l’onglet Paramètres (Settings). Activez l’option emoji. Une fois activée, tous les caractères emoji présents dans votre template ou vos données dynamiques seront rendus dans le PDF généré.

Caractères spéciaux et texte non-latin

La police par défaut de PDFMonkey est Open Sans. Bien qu’elle soit suffisamment esthétique pour la plupart des cas, elle ne couvre pas grand-chose en matière de caractères non-latins.

Si vous devez afficher des caractères non-latins dans vos documents, vous aurez besoin d’une police web différente.

Voici quelques jeux de caractères fréquemment demandés sur Google Fonts :

Vous pouvez trouver d’autres langues en utilisant le champ de sélection dédié sur Google Fonts :

Questions fréquentes

Comment utiliser Google Fonts dans un template PDFMonkey ?: Copiez la balise <link> depuis Google Fonts et collez-la en haut de votre onglet HTML, puis référencez la famille de polices dans votre CSS. Le chargement de polices par URL nécessite un forfait PDFMonkey payant.
Peut-on utiliser des polices personnalisées dans les en-têtes et pieds de page PDFMonkey ?: Oui, mais vous devez intégrer la police en tant que data URI Base64 dans une balise <style> dans les paramètres d’en-tête/pied de page. Les URL de polices externes ne fonctionnent pas dans les en-têtes et pieds de page via les paramètres.
Comment afficher des emojis dans un PDF PDFMonkey ?: L’affichage des emojis est désactivé par défaut. Ouvrez votre template, allez dans l’onglet Paramètres et activez l’option emoji. Une fois activée, les caractères emoji dans votre template ou vos données dynamiques s’afficheront dans le PDF.
Comment afficher des caractères non-latins comme le chinois ou l’arabe dans PDFMonkey ?: Importez une police web qui prend en charge le jeu de caractères dont vous avez besoin. Google Fonts propose des polices pour l’arabe, le chinois, le japonais, le cyrillique, l’hébreu et de nombreux autres scripts. La police Open Sans par défaut ne couvre que les caractères latins de base.