An extremely easy way to use custom fonts in emails without having to use art software.
- 🎨 Outputs optimized SVG, PNG, and Base64 inlined images with optional support for @2x and @3x Retina versions (uses the incredibly fast and performant sharp).
- 💡 Automatic smart-detection of font names spelled incorrectly (or with the wrong extension) with 50% accuracy (uses fast-levenshtein and checks for at least 50% distance match).
- 🔮 Detects user, local, network, and system fonts using os-fonts (e.g. you don't need to write
Arial.ttf, you can just write
- 🎉 Supports all WOFF, OTF, and TTF fonts (both with TrueType
- ✨ Use with recommended packages nodemailer and nodemailer-base64-to-s3, or simply use CrocodileJS (has this built-in).
- 🍐 Pairs great with font-awesome-assets and juice (see CrocodileJS's usage as an example).
- ✅ Supports offline and missing image support by automatically adding
font-sizebased upon the options passed.
- What does this do?
Don't want to configure this yourself? Try CrocodileJS!
What does this do?
- Imagine you find a really cool font on GitHub such as GoudyBookletter1911, or another font at sites like DaFont or Font Squirrel.
- You want to use this font in your emails and write the text "Make something people want" with it to use as a footer graphic. 🎉 Congratulations, because this package lets you do that with basically one line of code!
- Let's compare the old and new way (thanks to this package) to put custom fonts in emails.
Here's the old, slow, and convoluted way you'd do this:
- Typically you'd have to open Photoshop, GIMP, or Sketch (wait for the updates to finish), and then create an image with this text, select the font, color, and then save it as an image.
- Then upload it somewhere or have to wait until it deploys to production so you have a valid non-local URL (which is prone to caching in Gmail – in other words... if you ever need to make a slight adjustment to it then you have to completely rename the file).
- Reference the image in your HTML and try to rememember it's dimensions, or have to open up the art software again to get dimensions. What about Retina? What if you need to change the size or color of the font? What if you need to convert points to pixels? Just forget it... It's too complicated and time consuming, and now your emails will look boring like they always did! 😦 😡
💥 You don't need to do that anymore! 😄 Here's how easy it is:
;;const options =text: 'Make something people want'fontNameOrPath: 'GoudyBookletter1911'fontColor: 'white'backgroundColor: '#ff6600'fontSize: 40;customFonts;
You can now use any font in your emails – without having to use art software like Photoshop or Sketch!
It supports system-wide fonts out of the box, but you can pass a file path if you wish to use a custom non-standard font. You can also customize its kerning, anchor, color/fill, stroke, font size (even in points if needed), add custom attributes to the HTML tag, and more! See Usage, Options, and the API reference below for more info.
It even uses the fast-levenshtein algorithm to detect the closest match to the spelling of a font (e.g. in case you mispellled
Using the options defined in [New Approach](#new approach) above, the following code provides examples of this package's API methods.
|API Method and Preview||Image Type|
Lastly, here's what a broken image looks like that was attempted to be rendered with an API method. It makes use of the option
supportsFallback defined below in Options. This is a really useful fallback for offline emails, invalid cached images, and more!
npm install -s custom-fonts-in-emails
options argument in all API methods is an Object that accepts the following properties:
||String||Text to write using the font family specified in
||String||Name or file path of the font (defaults to
||Number or String||Size of font in pixels, which is rounded to nearest whole Integer (this automatically sets
||String||Valid hex color or rgba value to render the text fill color with with (defaults to
||String||Valid hex color or rgba value to render the background color with (defaults to
||Boolean||Ensure that the output image has fallback attributes
||Boolean||Ensure that the output image height is resized to
||Boolean||Ensure that the output image is trimmed using sharp's trim API method – it trims "boring" pixels from the edges – not applicable to
||Number||Must be from 1-99 inclusive, sets the trim tolerance value using trim (defaults to
||Object||Attribute key-value pairs that will be applied to the returned tag (defaults to
||Object||Options defined in textToSvg below which get passed to text-to-svg (and subsequently opentype.js):|
||Number||Horizontal position of the beginning of the text (defaults to
||Number||Vertical position of the baseline of the text (defaults to
||Number||Size of the text in points (defaults to
||String||Anchor of object in coordinate (defaults to
||Object||Attribute key-value pairs that will be applied to the returned
Please note that as of
v1.0.0this API is synchronous and will block. For an asynchronous version please use
v0.0.4of this package.
A function that accepts options to set defaults for future use and returns the new package defaults.
A function that accepts options and returns refined
A function that accepts options and returns with a String of the
<svg> HTML tag for the custom font.
This function takes the argument
options and passes it to
customFonts.svg, except it returns the String as Base64 inlined data.
customFonts.img, except it returns Base64 inlined data for a PNG instead of an SVG.
It also optionally accepts a Number
scale (defaults to
1), which will scale the image for retina support.
For example, if the font rendered is 20px, then it will multiply 20px by
scale (e.g. if
2, then the image returned will be
20px but it will be scaled to
customFonts.png, except it returns an image with twice as many pixels (it multiplies
fontSize * 2 and returns an image scaled to 1x for 2x retina support, it passes
2 as the
customFonts.png, except it returns an image with three as many pixels (it multiplies
fontSize * 3 and returns an image scaled to 1x for 3x retina support, it passes
3 as the
A function that returns an Array of file paths for all of the user, local, network, and system fonts available on the current operating system.
The same as
customFonts.getAvailableFontPaths, except it returns font names instead of font paths.