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

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

Requirements

  1. Serverless framework >1.1.0

Getting started

  1. Setup your serverless account
# Install the serverless framework
npm install -g serverless
# Setup your AWS credentials
serverless config credentials --provider aws --key AKIAIOSFODNN7EXAMPLE --secret wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
  1. git clone https://github.com/sbuckpesch/s3-svg-to-webfont-generator.git
  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="http://s3.amazonaws.com/doc/2006-03-01/">
     <CORSRule>
     <AllowedOrigin>*</AllowedOrigin>
     <AllowedMethod>GET</AllowedMethod>
     </CORSRule>
    </CORSConfiguration>
  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

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

Like what you read? Give Sebastian Buckpesch a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.