CODEWITHSUNDEEP
cssfontswkhtmltopdf
fkoessler
fkoessler

Reputation: 7276

use custom fonts with wkhtmltopdf

I am trying to use custom fonts in my PDF generated with wkhtmltopdf. I read that you can't use google webfonts and that wkhtmltopdf uses truetype .ttf file. Can anyone confirm that? So I downloaded a .ttf file from google webfont and put in on my server, then used the font face:

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

and font family:

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

And now the text that is supposed to render with Jolly Lodger font doesn't appear at all, page is blank.

What am I doing wrong?

PS: I tried with different .ttf files.

Upvotes: 44

Views: 107827

Answers (13)

Jonny O&#39;Gorman
Jonny O&#39;Gorman

Reputation: 1

Solution: You have to specify what directories wkhtmltoimage is allowed to access, thus --allow . allows wkhtmltoimage to look in the current directory for any external files used in the renderng process - for this reason and for simplicity you can copy all relevant files including images and fonts to the same folder and execute wkhtmltoimage from there - if you need greater complexity in your directory structure then you probably need to indicate this using the --allow flag - for simplicity try this method first and then expand your solution as required whether its on terminal or written in php

  1. copy input.html and font.ttf to project directory

  2. cd to that directory

  3. execute command

    wkhtmltoimage --allow . input.html output.png

to use the font of choice in that case your head tag will contain the following

<style>
@font-face {
font-family: 'LiberationSerif-Bold';
src: url("LiberationSerif-Bold.ttf") format('truetype');
}
p {font-family: LiberationSerif-Bold;}
</style>

Upvotes: 0

user9645
user9645

Reputation: 6806

I found that it is the relative URL in the font src that causes the issue, which is why it works with google api fonts - you specify an absolute url in the link src. In fact it seems to choke on any relative urls anywhere...

So this works:

@font-face {
   src: url("https://yourhost/fonts/blah.ttf") format ("truetype");
   ...
}

but these do not work:

@font-face {
   src: url("../fonts/blah.ttf") format ("truetype");
   ...
}
@font-face {
   src: url("fonts/blah.ttf") format ("truetype");
   ...
}

This was with wkhtmltopdf version 0.12.6.

Upvotes: 0

Glen Thompson
Glen Thompson

Reputation: 10016

Option for unix based systems

I was generating these pdfs server side. I was finding that fetching the font in the above ways was blowing up my pdfs e.g. 24kb vs 1Mb. I found this very helpful https://sanjay.cc/ubuntu-font-install.

Basically wkhtmltopdf looks in /usr/share/fonts/truetype for system fonts. So all you really have to do is add the font you want to this folder and make it accessible. Then you can just reference the font. e.g. if I want to use calibri then I can do the following.

  1. Add the font
cp -r calibri /usr/share/fonts/truetype/
  1. Cache font
fc-cache -f -v
  1. Use the font
html {
    font-family: Calibri;
}

Note: add all font variations for best results

calibri
├── calibri-bold-italic.ttf
├── calibri-bold.ttf
├── calibri-italic.ttf
└── calibri-regular.ttf

Upvotes: 2

pixlboy
pixlboy

Reputation: 1502

Just in case nothing has worked out for you yet:

Please try the standalone version of wkhtmltopdf instead of installable.

I had a similar issue but its resolved by using:

https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.mxe-cross-win64.7z

Unzip the file > go to bin folder > run your command.

Upvotes: 0

ITbug
ITbug

Reputation: 45

using @import not fetching the font, you need to add .ttf file to the project

Upvotes: 0

Topper Harley
Topper Harley

Reputation: 12384

I personally had to set the font family on a div (I initially wanted a 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>

Upvotes: 1

gdvalderrama
gdvalderrama

Reputation: 806

After doing all the workarounds suggested (some which actually worked), I came across a way easier solution:

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

You can simply use the @import notation to include the font.

Upvotes: 1

tgk
tgk

Reputation: 4116

As stated above by Yardboy we've found that base64 encoding the truetype font in our CSS works well. But I wanted to share some additional insight.

We use 4 custom fonts all uniquely named 'Light' 'Medium' etc..

I use openssl toolkit to base64 encode with good results. But you could alternatively use fontsquirrel. Just be sure to strip out all other font types ('woff' 'otf' .. ). We found that using truetype exclusively worked mysteriously.

Encode file, trim output and add to clipboard

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

In Windows you should install openssl and add it to path then

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

or simply use this kind of websites

Add to css font src property

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

Rendered output will depend on your wkhtmltopdf version and flavor. Because our servers run Debian and I develop on OSX I tested on a VM locally.

Upvotes: 19

Husrat Mehmood
Husrat Mehmood

Reputation: 2310

If you have .ttf file or .woff file then use following syntax 

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

don't use ttf that will not work rather use full name 'truetype' and if you have .woff then use 'woff' in format. For my case it worked.

However the best practice is to use links to Google fonts API that is best if not getting that matching your criteria then use this above technique it will work

Upvotes: 10

Arve Systad
Arve Systad

Reputation: 5479

I'll just add my answer here too, in case someone might need it.

I've been using Rotativa which builds upon wkhtmltopdf, and what I ended up using was the following:

@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");
}

...and it seem's Rotativa is picking up the SVG-version. If I reorder them it still works, but if I remove the SVG-version, it stops working.

Might be worth a shot. Can't find any good documentation on why this is so, however

Upvotes: 3

Daljit
Daljit

Reputation: 695

Since it is a Google Web font you need not to write @font-face in you style sheet just use following link tag in your source code: 

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

and 

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

will work.

By the way, in your code you are defining @font-face family as font-family: Jolly; and using it as p { font-family: 'Jolly Lodger', cursive; } that is wrong, because it's mismatching font-family name.

Upvotes: 31

Yardboy
Yardboy

Reputation: 2815

I found that Arman H.'s solution (base64 encoding the fonts) over on this question worked like a charm: Google Web Fonts and PDF generation from HTML with wkhtmltopdf

Upvotes: 4

Bezinga
Bezinga

Reputation: 231

I am betting you are calling wkhtmltopdf from a web wrapper using IIS. That's why some folks are saying that it does work for them. They are probably calling wkhtmltopdf from the command line, in which case it can resolve relative links in CSS URL()s but if you are calling it from snappy or the like you can get around the problem by specifying a URL like say URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf') instead.

The inability to properly resolve relative links in CSS URL() tags appears to be broken in wkhtmltopdf 0.11.0_rc1 but some earlier versions might work okay. The same problem happens with other CSS URL() tags like when calling a background images - resolving the file location is broken. Interestingly though, in the case of images, if you use <IMG SRC=>, 0.11.0_rc1 is able to find the file, even if a relative path is provided. The problem appears to be limited to URL() tags inside CSS.

EDIT: I found out that if you use file:/// with all forward slashes in the path then it works. In other words URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') should work.

Upvotes: 23

Related Questions