Page 13

I wanted to get this out earlier but at least it’s (barely) pre-Thanksgiving.

Mistletoe is a mutli-colored font to brighten up the holiday season. It contains hand drawn, thick serif lettering with a leaf and berry pattern inside. It’s an all caps font and better for display situations than long blocks of text.

Color fonts are supported in Illustrator CC 2018 and Photoshop CC 2017 plus Firefox and Microsoft Edge on the web. This package also includes a single color fallback variation. For more information on the technical side of color fonts, checkout colorfonts.wtf.

This is my first color font and the first font I’ve created with the Glyphs app so if you have any technical issues — even if you’re using the free personal version — please let me know so I can get them fixed. Also, I’ve been trying to figure out if additional palettes would be overkill or a welcome feature so feel free to share that or any other feedback.

Download it here.

Later this week I’ll be releasing my first attempt at a color font so it seems like a good time to look at some of the awesome examples that are already out there.

If you need a quick overview of color fonts - how they work, where you can use them, etc. - colorfonts.wtf and Adobe Typekit have helpful primers. Unfortunately, support on the web (Firefox and Microsoft Edge only) isn’t great just yet but these fonts are still worth checking out now.

Free Fonts

Bungee by David Jonathan Ross

Not only is this font great, this page is a great example of horizontal scroll page design.

Color Tube by Ivan Filipov

Playbox by Matt Lyon

Creative Market (Premium) Fonts

Olcino by Igor Petrovic

Memphis by Anugraha Design

Bouquet by bloomxxvi

I’m still using the Swig templating engine for my Node/Express apps and recently decided to streamline my asset caching process. I wanted a simple way to insert hashed assets into my templates but everything that Google came up with seemed a little too complicated. So I wrote a quick custom Swig tag to read from an asset manifest (in my case public/assets.json generated by the Webpack Manifest Plugin):

let assets = require('../../public/assets.json');

module.exports = function (swig) {
  swig.setTag('asset', _parse, _compile, false, true);
};

let _parse = function (str, line, parser) {
  parser.on('*', function (token) {
    let match = token.match.match(/^["'](.*?)["']$/);
    let assetPath = match ? match[1] : null;

    if (assetPath) {
      let asset = assets[assetPath] || assetPath;
      this.out.push(asset);
    }
  });

  return true;
};

let _compile = function (compiler, args) {
  if (!args || !args[0]) {
    throw new Error('The asset tag expects a filename as a string');
  }

  let assetPath = args[0].startsWith('/') ? args[0] : '/' + args[0];
  return `_output +="${assetPath}";`;
};

(GitHub Gist)

I keep this file in an app/helpers directory and in app.js my views are set up with the lines:

require('./app/helpers/assets')(swig);
app.engine('html', swig.renderFile);
app.set('view engine', 'html');

After that stylesheets or JavaScript can be added to any template using the unhashed name like so:

<script src="{% asset 'main.js' %}"></script>
<link rel="stylesheet" href="{% asset 'main.css' %}" />

My fonts were just added to the new archive Font Planet and they were nice enough to single out Hellmuth so I’m gonna get back to free font Friday with a couple great selections from there.

La Tequila by Leonard Posavec.

Download at Font Planet.

Hansief by Kautsar Rahadi.

Download at Font Planet.