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 con

Answer 1

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 2

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

Answer 3

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 4

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

Answer 5

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 6

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.