Automatic SVG to Webfont generation using S3 and AWS Lambda (5min setup)

Image for post
Image for post

Until now Webfont generation was a big pain point. We handled it by adding SVG to our Git repositories and compiling a new version of the webfont using NPM or CLI scripts in our build process. Explain this to your designer — they will hate it! Let’s make it easy!

  1. Create a folder on S3
  2. Drop some SVGs in it
  3. Wait 5 seconds and reload
  4. Your done! Really!

These files have been generated automatically for you:

  1. html file containing a preview of all your icons, instructions how to use the font. DEMO
  2. Font files: ttf, eot, woff, woff2, svg
  3. CSS font file, ready to be included in your HTML head or to import in your SCSS files
  4. json icon map

How does it work?

  1. An AWS Lambda function is deployed to your AWS Account using the Serverless framework (you need to setup the serverless framework and add your AWS credentials [5 min])
  2. A new S3 bucket will be deployed to your account as well (bucket name is configured in serverless.yml file)
  3. Each time you drop SVG files to this bucket the Lambda function will be triggered
  4. The function will get all other SVG files of the folder you droped your SVG in, generate all Webfont files using this node Webfonts-generator and upload them to the same folder on S3
  5. The webfont name equals the folder-name, the icon class equals the filename of your SVGs


  1. Serverless framework >1.1.0

Getting started

  1. Setup your serverless account
# Setup your AWS credentials
serverless config credentials --provider aws --key AKIAIOSFODNN7EXAMPLE --secret wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
  1. git clone
  2. Edit the serverless.yml file and enter a new and unique bucket_name, region and stage
  3. sls deploy
  4. Make your bucket publicly available
  5. Add this CORS configuration to your S3 bucket (else
    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="">
  6. Create a folder on your s3 bucket and put some SVG files in it
  7. Enjoy! :-)

Just make it easy for everyone. This AWS Lambda function will:

  • Watch a specified S3 bucket for new SVG files
  • Regenerate a new webfont on each SVG upload (ttf, woff, woff2, eot, html, css, json)
  • Recongizes the folder structure of the S3 bucket to manage multiple webfonts
Image for post
Image for post

I hope you like it. My designers love it :-)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store