WhtmlToPdf doesn't apply fonts to PDF

Question

I am currently working on a document generator symfony 2 bundle which allows to generate HTML and PDF documents (such as an invoice).

When i generate my document in-browser as an HTML page, everything's fine, but when i generate my PDF file, i have no fonts applied to my document.

I use the same templates for both case. Here is my pdf generation method :

private function generatePdfWithoutMerge($html)
{
    $pdfService = $this->get('knp_snappy.pdf');

    return $pdfService->getOutputFromHtml($html);
}

The $html variable is generated from a rendered twig template and, as said before, i have no issues if i display it as HTML in my browser.

LESS File :

@base-url: 'url-to-bucket';
@dark-grey: #555559;
@dark-pink: #970047;

@font-face {
    font-family: paralucent_demi_boldregular;
    src: url('@{base-url}/paradb__-webfont.eot');
    src: url('@{base-url}/paradb__-webfont.eot?#iefix') format('embedded-opentype'),
    url('@{base-url}/paradb__-webfont.woff') format('woff'),
    url('@{base-url}/paradb__-webfont.ttf') format('truetype'),
    url('@{base-url}/paradb__-webfont.svg#paralucent_demi_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: paralucent_lightregular;
    src: url('@{base-url}/paral___-webfont.eot');
    src: url('@{base-url}/paral___-webfont.eot?#iefix') format('embedded-opentype'),
    url('@{base-url}/paral___-webfont.woff') format('woff'),
    url('@{base-url}/paral___-webfont.ttf') format('truetype'),
    url('@{base-url}/paral___-webfont.svg#paralucent_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: paralucent_thinregular;
    src: url('@{base-url}/parat___-webfont.eot');
    src: url('@{base-url}/parat___-webfont.eot?#iefix') format('embedded-opentype'),
    url('@{base-url}/parat___-webfont.woff') format('woff'),
    url('@{base-url}/parat___-webfont.ttf') format('truetype'),
    url('@{base-url}/parat___-webfont.svg#paralucent_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: paralucent_mediumregular;
    src: url('@{base-url}/param___-webfont.eot');
    src: url('@{base-url}/param___-webfont.eot?#iefix') format('embedded-opentype'),
    url('@{base-url}/param___-webfont.woff') format('woff'),
    url('@{base-url}/param___-webfont.ttf') format('truetype'),
    url('@{base-url}/param___-webfont.svg#paralucent_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    color: @dark-grey;
    font-family: paralucent_lightregular, Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    line-height: 0.9em;
}

.thin {
    font-family: paralucent_thinregular, Helvetica, Arial, sans-serif;
}

.bold {
    font-family: paralucent_mediumregular, Helvetica, Arial, sans-serif;
}

.demibold {
    font-family: paralucent_demi_boldregular, Helvetica, Arial, sans-serif;
}

.price {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
}

.separator_unbreak_wrapper {

}

.separator_unbreak {
    page-break-inside: avoid !important;
}

.city_format {
    font-size: 0.75em;

}

table tr th {
    border-bottom: 1px solid @dark-pink;
    font-weight: normal;
    font-style: normal;
}

My fonts are .eot, .woff, .ttf and .svg files, hosted on a S3 Bucket with CORS set like this : localhost GET * — Mouke, Mar 16 '16 at 13:55
I don't know this library, but I'd be very impressed if it were smart enough to embed `font-face` fonts referenced in a HTML document... maybe they need to be added manually? I really don't know anything about this product, though. — Pekka, Mar 16 '16 at 13:57
Oh, indeed it does do this. Nice. Maybe there is an error in the way you reference the font, though? http://stackoverflow.com/questions/10611828/use-custom-fonts-with-wkhtmltopdf — Pekka, Mar 16 '16 at 13:58
In your example, the person uses a GoogleFont link. It is fine, but i have a specific font which cannot be found on it : Paralucent. I have the font files as said before. I'll post my LESS file in the OP. — Mouke, Mar 16 '16 at 14:05
wkhtmltopdf has enormous trouble with any external resources, even stylesheets when parsing it through its internal browser. You wont be able to achieve what you want. Youll have to use something more sophisticated. — DevDonkey, Mar 16 '16 at 14:16

score 1 · Accepted Answer · answered Mar 16 '16 at 14:45

1

Thanks to DevDonkey comment :

I tried to have a nice file architecture with a children templates extending from a common parent template and a common LESS file, but Wkhtmltopdf has some issues with such complex architecture. I had to gather everything in a single HTML file to make it work.

Many thanks all for your help.

answered Mar 16 '16 at 14:45

Mouke

854
1
7
19

This doesn't mean that Wkhtmltopdf had to interpret LESS files, though, right? It received normal CSS to parse? – Pekka Mar 17 '16 at 09:37
1

No, since it is a twig template using assetic, the render() call will process the LESS file into a CSS file and all the twig files into an HTML file. By the way, twig include/extends works like a charm so you can create a twig file with you – Mouke Mar 17 '16 at 10:10

WhtmlToPdf doesn't apply fonts to PDF

1 Answers1