Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Utilizing custom font in AWS Lambda and Node.js 12.x

I'm trying to create an AWS Lambda function to apply a watermarking effect on images. The original image will be pulled from S3, the watermarks applied and the results uploaded back to S3.

I'm using sharp to create these compositions with this code:

await sharp(inputImage)
              .rotate()
              .composite([{ input: new Buffer.from(watermark), tile: true, gravity: 'northwest' }])

With a custom watermark SVG

watermark = `<svg ... <text x="50%" y="100%" style="font-family:'Open Sans';font-weight:400;font-size:75px;font-style:normal;fill:rgba(128,128,128,1);stroke:none;" text-anchor="middle">${event.watermarkName}</text></g></svg>`;

Inside the SVG there is a text element that I dynamically change to contain a specified string. For example, I can put (c) Company Name on one image and (c) John Doe on another.

The code works when is running on my machine, but once inside a Lambda function with Node.js 12.x runtime this is the result Example of text watermark

As you can see I specified Open Sans as the font to be used. I, in fact, put the OpenSans-Regular.ttf file in /fonts/, created a fonts.conf file and set a FONTCONFIG_PATH='/var/task/fonts' as described in this question.

Nonetheless, fonts are still not working. Does anyone have suggestions about how I can fix this?

like image 939
Francesco Avatar asked Jul 18 '26 09:07

Francesco


1 Answers

Well asking Stackoverflow helped me finding the answer on my own, so I'm sharing in case anyone stumbles across this problem in the future.

AWS Lambda does not appear to support even basic fonts on it's own. For this reason, you will need to include you onw fonts as files inside the deployment zip file.

In my case this worked:

  • Creat a /fonts folder and inside placed all the files needed (in my case OpenSans-Regular.ttf).

  • Put a file named fonts.conf inside this folder

    <?xml version="1.0"?>
    <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
    <fontconfig>
       <dir>/var/task/fonts/</dir>
       <cachedir>/tmp/fonts-cache/</cachedir>
       <config></config>
    </fontconfig>
    
  • Tell Lambda where the config file is by creating an environment variable

     FONTCONFIG_PATH='./fonts'
    

And voilà!

Working example

like image 118
Francesco Avatar answered Jul 20 '26 10:07

Francesco



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!