Phantom JS bad kerning custom fonts on lambda

Question

I am running html-pdf to generate a PDF via nodejs using phantomJS and running it on aws lambda. I have custom fonts, and referencing them with path in css (src: url('path/fonts.ttf'); was causing the pdf to render as one large image and the filesize was 10x larger than the original.

so I changed it to reference the fonts locally, to fix the filesize issue changing qt_qpa_fontdir and home variable to my local fonts directory and it works. the fonts now display and the filesize is back to normal. However, there is bad letter spacing/kerning with the fonts.

this was also a problem when I was referencing the fonts via a path but I fixed that with a fonts.conf file in the shared fonts folder using an xml:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="lcdfilter">
   <const>lcddefault</const>
  </edit>
 </match>
</fontconfig>

That fix is not helping now that the fonts are being referenced locally. Do I have to specify the QT fonts config file path as well? or change the fonts.conf?

score 0 · Answer 1 · edited Oct 14 '19 at 16:30

Here's what I just got to work for custom fonts on AWS Lambda for htmltopdf .

I created a fonts directory in my root project fonts directory and placed all of my fonts there. Also in that directory I created a fonts.conf file that looks like this:

    <?xml version="1.0"?>
    <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
    <fontconfig>
      <dir>/var/task/fonts/</dir>
      <cachedir>/tmp/fonts-cache/</cachedir>
      <config></config>
    </fontconfig>

And then in my (node.js based) handler function, I set an ENV var to tell fontconfig where to find the fonts.

process.env.FONTCONFIG_PATH='/var/task/fonts' - if it not works change path to '/var/task'

After doing that I can refer to a font, like Bitter, in my template by name (just Bitter).

I figured this out based on the tips in this project for getting RSVG to work with custom fonts on Lambda: https://github.com/claudiajs/rsvg-convert-aws-lambda-binary/blob/master/README.md#using-custom-fonts

NOTE : If you face any problem in letters sapcing in generated pdf , modify your existing fonts.conf to below one

    <fontconfig>
        <dir>/var/task/fonts/</dir>
        <cachedir>/tmp/fonts-cache/</cachedir>
         <!--
         Load local system customization file
        <include ignore_missing="no">conf.d</include> -->
        <match target="font">
            <edit mode="assign" name="rgba">
                <const>rgb</const>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="hinting">
                <bool>true</bool>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="hintstyle">
                <const>hintslight</const>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="antialias">
                <bool>true</bool>
            </edit>
        </match>
        <match target="font">
            <edit mode="assign" name="lcdfilter">
                <const>lcddefault</const>
            </edit>
        </match>    
        <config></config>
    </fontconfig>

Phantom JS bad kerning custom fonts on lambda

1 Answers1