Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom fonts not working in Generated PDF using WKHTMLTOPDF Library

I am using Laravel 5.1 SnappyPDF wrapper, which is using WKHTMLTOPDF library. I am trying to include some custom google fonts for my PDF file, but those fonts are not working in generated PDF file.

I tried, converting fonts into Base64 and also tried to include fonts by absolute URL and relative URL, also tried many answers available at stack overflow but none of them worked for me. How to fix this issue.

//Calling fonts
@font-face {
    font-family: Roboto Condensed;
    src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: 'Open Sans Semi Bold Italic';
    src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}

 //implenting fonts
.report-page2-col-wrapper .col-heading{
    font-family:"Open Sans Semi Bold Italic";
    font-size:12pt;
    line-height:17pt;
}

see difference in screen shots

1) This is web browser HTML version, looks find and fonts implementing properly


enter image description here

2) This is Generated PDF version, fonts not applying properly


enter image description here

like image 834
Qazi Avatar asked Dec 23 '16 04:12

Qazi


People also ask

Does PDF support custom fonts?

The summary: Markdown to PDF supports all fonts in the Google fonts library, plus a couple PDF-common fonts like Helvetica and Times New Roman. HTML to PDF supports custom fonts via the CSS @import directive and CSS's @font-face directive.


1 Answers

There are multiple solutions to accomplish this:

1) If you use google font, try below: Use <link> to include google font

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

Use <style> to apply font effect

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

2) Encode font with Base64 encode tool and use it in css

@font-face {
    font-family: 'YOURFONTFAMILY';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

Hope one of the above is your solution!

Taken ref: use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf

like image 138
AddWeb Solution Pvt Ltd Avatar answered Sep 30 '22 12:09

AddWeb Solution Pvt Ltd