The letter O in font not rendering correctly

[mangopop]

Hi,

Hopefully someone may be able to shed some light on this?

I've got a problem with just one font character rendering badly.

Here is the problem character (O)

The font type is Kabel and it's loaded using font-face css like so:

@font-face {
    font-family: 'KabelLTStd-Heavy';
    src: url('/webfonts/2BA23B_14_0.eot');
    src: url('/webfonts/2BA23B_14_0.eot?#iefix') format('embedded-opentype'),
url('/webfonts/2BA23B_14_0.woff') format('woff'), url('/webfonts/2BA23B_14_0.ttf') format('truetype');
}

and called in with
font-family: KabelLTStd-Heavy, helvetica, sans-serif;

Is this the fonts problem? Which font does wkhtmltopdf use given the options above?

I've installed the fonts on the OS, but this hasn't made a difference.

Here are some details of my envroment:
wkhtmltopdf 0.12.1 (with patched qt)
Ubuntu 12.04.5 LTS (GNU/Linux 3.13.0-36-generic x86_64)
also tried on version 14.*

Could it be a problem with the OS I'm using? Or the version of wkhtmltopdf?

Any help would be greatly appreciated.

[baruchel]

Hi mangopop,

I encountered the very same issue with all fonts I have been trying. For my own needs I tried fixed-width fonts all have the same issue.

Below is FireMono-Regular (look at the uppercase D as well as the top of each character):

Below is SourceCodePro-Regular (look at the top of each character):

Below is APL385 (if you look carefully at the top of each character you still see the issue; for instance at the top of the uppercase C character or at the top of the dollar sign):

I use Xubuntu 14.10 and tried to different versions of wkhtmltopdf.

[daviferreira]

Having the same issue with Helvetica on Ubuntu Server. Works fine on Mac.

Using @font-face.

[ashkulz]

Can you check with the 0.13-alpha Windows or Debian Wheezy version (not headless yet; run via xvfb-run) whether it looks OK?

[mangopop]

Hi,

Yes that has worked!

[ashkulz]

@baruchel, @daviferreira: I assume that it will work for you on 0.13.0 too -- if it doesn't help, please report back.

[bonny]

Using 0.13 worked for me. I had this problem with 0.12.1 on an headless Ubuntu 14.

(Opacity/transparency stopped working however when switching 0.13, but I saw that was mentioned in another issue.)

[andrewjlow]

Is there any chance of a 0.12.x fix for this? I have been having a hard time trying to get the alpha version running on my Amazon EC2 instance...

[pomm0]

I got the same problem, any chance of a 0.12.x fix?

[artifilabs]

When will the version 0.13 be released with patched qt.

[allisterk]

Note that this was fixed by using OTF rather than TTF on our systems using 0.12.4

[ImArtur]

@ashkulz are there any informations about this?

[dominiceden]

Having same issue on Ubuntu 16.04.4 LTS - font is Nunito (Google Fonts). Using 0.12.4. I'm probably going to switch to using Puppeteer for Node to render my PDFs as there doesn't seem to be any update on fixing this issue three and a half years on from when it was first reported.

[juresrpcic]

Had the same issue on Ubuntu 18.04 LTS - using wkhtmltopdf 0.12.5 (with patched qt).

I installed wkhtmltopdf with instructions here (worked great - includes libpng12-0 dependency some people have issues with and works properly with https sources).

Was able to fix the glyph artifacts it by getting OTF versions of fonts (for Google fonts, you can find them here: https://github.com/googlefonts).

This is an example CSS font-face for a two weights using OTF (Rubik Google font):

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	src: local('Rubik Light'), local('Rubik-Light'),
		url('https://yourserver.com/pdf/rubik/Rubik-Light.otf') format('opentype');
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	src: local('Rubik'), local('Rubik-Regular'),
		url('https://yourserver.com/pdf/rubik/Rubik-Normal.otf') format('opentype');
}

[xmontero]

Can you check with the 0.13-alpha Windows or Debian Wheezy version (not headless yet; run via xvfb-run) whether it looks OK?

@ashkulz In 0.13 alpha for ubuntu 14.04 downloaded from here https://wkhtmltopdf.org/downloads.html it now seems to render the curves without deformation.

Nevetheless, it still renders as "curves" instead of text and the PDF is not selectionable as text for doing copy/paste from the PDF readers.

It therefore solves the issue for more artistic texts, but still yields in a problem for paragraph based PDFs which should be text instead of graphics.

[jimmynash]

I ran into this issue with 12.5 and wasn't able to get 13 alpha running on Ubuntu 18.04.

In my case the calibre font was installed to the server but only as .ttf

I ran those .ttf font files through a converter to .otf and included them on the server alongside the ttf versions.

That was the trick for me. Now that font renders correctly with the 12.5 version.

[lucch]

Also run into this issue using font Cinzel and wkhtmltopdf 0.12.5 (with patched qt) on Ubuntu 16.04.

Only way I managed to solve the problem was to convert the .ttf to .otf (as pointed out above), but I didn't need to include both versions (only .otf did fine).

[jhouxzirrus]

I've put a bounty on the StackOverflow question relating to this issue of curves vs text:
https://stackoverflow.com/questions/50593679/make-wkhtmltopdf-to-render-text-instead-of-curves

If anyone knows whether wkhtmltopdf is supposed to render text or curves or some way to switch between choosing them, please respond.