use custom fonts with wkhtmltopdf

Question

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.

Answer 1

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; } p { font-family: 'Jolly Lodger', cursive; } that is wrong, because it's mismatching font-family name.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

我发现 Arman H. 在这个问题上的解决方案（base64 编码字体）就像一个魅力： Google Web Fonts and PDF generation from HTML with wkhtmltopdf

Answer 6

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

Answer 7

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.

Answer 8

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>

Answer 9

使用@import 不获取字体，您需要将 .ttf 文件添加到项目中

Answer 10

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.