Phantomjs: Font kerning issue when rendering to PDF on Ubuntu

[antonholmquist]

Setup:
Ubuntu 12.04 LTS
PhantomJS 1.9.1

It happens for all fonts with the same letters combinations rendering completely off. The fonts are Microsoft Core Fonts.

When I render to PNG it renders fine. Also when I run the same code on my Mac it renders fine.

I've tried modifying ~/.fonts.conf according to https://wiki.ubuntu.com/Fonts but it makes no difference.

[antonholmquist]

I got the exakt same issue with wkhtmltopdf, so it's not related to PhantomJS.

[ariya]

Looks like a bug or an issue with Qt's PDF engine. I wonder if there's an upstream bug regarding this.

[antonholmquist]

Actually, I do get correct results with wkhtmltopdf now but the problem persists on PhantomJS. Could it be related to the fact that wkhtmltopdf uses the X server while Phantom does not?

I provided some more information here:

http://unix.stackexchange.com/questions/79755/font-letter-spacing-issue-with-phantomjs-wkhtmltopdf-on-ubuntu?noredirect=1#comment117500_79755

[billschaller]

I have been able to solve this issue by supplying an OTF font replacement using a css @font-face query.

This DOES NOT WORK if it is in a linked stylesheet, or in a @media query within a style tag in the page body.

This only seems to work if the CSS is applied without any media query in a style tag in the page body.

Like so:

<style type="text/css">
    @font-face{
        font-family: "Helvetica Neue";
        src: url("css/arial-otf.ttf")
    }
</style>

I'm using bootstrap for a site I need to make PDFs from, and by overriding Bootstrap's default of "Helvetica Neue", I can ditch that font and replace it with the Windows system Arial font which I converted to OTF format. It is an otf font, even though it has the ttf extension -- that is just to get around IIS 7 not knowing what a .otf file is.

[bazitov]

@zeroedin-bill your solution works like charm, but I can't get the bold font-weight working. I can get either everything in bold or regular.

[skyrocknroll]

Keeping page.zoomFactor = 0.75; solved it for me..

[carlosacp]

If some desperate with this problem reach this topic, I was using phantom-html2pdf on linux ubuntu and having this issue. Installing ttf-mscorefonts-installer and migrate to phantomjs 2.0 (https://github.com/Pyppe/phantomjs2.0-ubuntu14.04x64) solve the problem

[erikverheij]

I had the same issue with phantomjs 2.1.1 and AWS Linux AMI (based on CentOS/RHEL).

This suggestion saved my life; https://github.com/wkhtmltopdf/wkhtmltopdf/issues/45#issuecomment-108649125

[moodysalem]

@erikverheij I'm also having this issue
http://moodysalem.github.io/react-page-div/

When you click download PDF, the html of the page is pushed to a server and the server uses phantomjs 2.1.1 to render it.

When you print from the browser it seems to have different kerning than when the server renders to PDF

I tried adding the .conf file to the /etc/fonts/conf.d directory on the EC2 instance but it didn't seem to change anything. Also can't find much information about reloading those files but I did an fc-cache call after that. Every server request starts a new phantomjs process so I'm not sure what I'm doing differently

[isuvorov]

I have the same issue
ubuntu, debian from docker image
phantomjs 1.9.2 & 2.1.1

fixed: apt-get install libfontconfig1

[abombelli]

Has this been solved?
When generating a PDF with SVG fonts kerning is Ok. But the generated file is huge as each letter is vectorized.

[notatestuser]

@abombelli Not to mention the viewer is unable to select any text! That fixed my kerning issue though.

[olegsfinest]

I had the same issues and I tend not to believe it but @billschaller 's comment solved it indeed. But I have the same problem like @bazitov, it does not work for several font-faces (for bold, italic etc). Has anyone come to a solution?

[stale[bot]]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!