web-dev-qa-db-fra.com

utiliser des polices personnalisées avec wkhtmltopdf

J'essaie d'utiliser des polices personnalisées dans mon PDF généré avec wkhtmltopdf . J'ai lu que vous ne pouvez pas utiliser Google WebFonts et que wkhtmltopdf utilise un fichier TrueType .ttf. Quelqu'un peut-il confirmer cela? J'ai donc téléchargé un fichier .ttf à partir de google webfont et l'ai installé sur mon serveur, puis utilisé la police de caractères suivante:

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

et famille de polices:

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

Et maintenant, le texte censé être rendu avec la police Jolly Lodger n'apparaît plus du tout, la page est vide.

Qu'est-ce que je fais mal?

PS: J'ai essayé avec différents fichiers .ttf.

cssfontswkhtmltopdf
29
fkoessler

Puisqu'il s'agit d'une police Google Web, vous n'avez pas besoin d'écrire @font-face dans votre feuille de style, utilisez simplement la balise link suivante dans votre code source: 

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

et 

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

marchera.

En passant, dans votre code, vous définissez la famille @font-face en tant que font-family: Jolly; et vous l'utilisez en tant que p { font-family: 'Jolly Lodger', cursive; }, ce qui est incorrect, car le nom de la famille de la police ne correspond pas.

19
Daljit

Je parie que vous appelez wkhtmltopdf à partir d'un wrapper Web utilisant IIS. C'est pourquoi certaines personnes disent que cela fonctionne pour eux. Ils appellent probablement wkhtmltopdf à partir de la ligne de commande. Dans ce cas, il peut résoudre les liens relatifs dans les URL CSS, mais si vous l’appelez depuis snappy ou autre, vous pouvez contourner le problème en spécifiant une URL comme par exemple URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf').

L'impossibilité de résoudre correctement les liens relatifs dans les balises CSS URL () semble être rompue dans wkhtmltopdf 0.11.0_rc1, mais certaines versions antérieures pourraient fonctionner correctement. Le même problème se produit avec d'autres balises d'URL CSS (), comme lors de l'appel d'une image d'arrière-plan. La résolution de l'emplacement du fichier est rompue. Fait intéressant, dans le cas des images, si vous utilisez <IMG SRC=>, 0.11.0_rc1 est capable de trouver le fichier, même si un chemin relatif est fourni. Le problème semble être limité aux balises URL () dans CSS.

EDIT: J'ai découvert que si vous utilisez file:/// avec tout forward slash dans le chemin, cela fonctionne. En d'autres termes, URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') devrait fonctionner.

17
Bezinga

Comme indiqué ci-dessus par Yardboy , nous avons constaté que l'encodage en base64 de la police TrueType dans notre code CSS fonctionne bien. Mais je voulais partager un aperçu supplémentaire. 

Nous utilisons 4 polices personnalisées, toutes nommées 'Light''Medium' etc .. 

J'utilise openssl toolkit pour encoder en base64 avec de bons résultats. Mais vous pouvez aussi utiliser fontsquirrel . Veillez simplement à supprimer tous les autres types de police ('woff''otf' ..). Nous avons constaté que l'utilisation de truetype fonctionnait exclusivement de manière mystérieuse.

Encode le fichier, coupe la sortie et ajoute au presse-papier

openssl base64 -in bold.ttf | tr -d '\n' | pbcopy

Sous Windows, vous devez installer openssl et l’ajouter au chemin puis

openssl base64 -in bold.ttf | tr -d '\n' | clip

ou simplement utiliser ce genre de sites web

Ajouter à la police CSS propriété src

   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }

La sortie rendue dépendra de votre version et de votre version wkhtmltopdf. Parce que nos serveurs fonctionnent sous Debian et que je développe sous OSX, je l’ai testée localement sur un VM. 

8
tgk

Si vous avez un fichier .ttf ou un fichier .woff, utilisez la syntaxe suivante 

@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }

n'utilisez pas ttf qui ne fonctionnera pas, utilisez plutôt le nom complet 'truetype' et si vous avez l'extension .woff, utilisez 'woff' au format. Pour mon cas cela a fonctionné.

Cependant, la meilleure pratique consiste à utiliser des liens vers l'API de polices de Google qui soit la meilleure si vous ne trouvez pas les critères correspondants, puis utilisez la technique ci-dessus, cela fonctionnera

4
ProgrammingNinja

Je vais juste ajouter ma réponse ici aussi, au cas où quelqu'un en aurait besoin.

J'utilise Rotativa qui s'appuie sur wkhtmltopdf, et ce que j'ai finalement utilisé est le suivant:

@font-face {
    font-family: "testfont";
    src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
         url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

... et il semblerait que Rotativa utilise la version SVG. Si je les réorganise, cela fonctionne toujours, mais si je supprime la version SVG, cela cesse de fonctionner.

Cela pourrait valoir le coup. Impossible de trouver une bonne documentation sur la raison pour laquelle il en est ainsi.

2
Arve Systad

J'ai trouvé que la solution d'Arman H. (base64 codant les polices) sur cette question fonctionnait à merveille: Google Web Fonts et la génération PDF de HTML avec wkhtmltopdf

1
Yardboy

Après avoir fait toutes les solutions de contournement suggérées (certaines qui fonctionnaient réellement), je trouvais une solution plus simple:

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

Vous pouvez simplement utiliser la notation @import pour inclure la police.

0
guival

J'ai personnellement dû définir la famille de polices sur une div (au départ, je voulais une span)

<style>
@font-face {
    font-family: 'CenturyGothic';
    src: url("fonts/century-gothic.ttf") format('truetype');
}

.title {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 22pt;
}
</style>

...

<div class="title">This is Century Gothic</div>
0
Benoit Duffez