Literate Web Font

TL;DR

This is a literate programming jekyll site to used to develop fonts on github with a special focus on ding bat webfonts.

Usage

Install

git clone [email protected]:bewest/literatewebfont.git
cd literatewebfont

Running with rake

rake font:analyze[font,theme]    # given a font, export and publish the glyphs in a post
rake font:build[theme]           # Build a font given a directory of glyphs.
rake font:css[font]              # print glyphs in css given path to font
rake font:demo[font,post]        # add/update yaml in a post
rake font:export[font,prefix]    # Export a font's glyphs to a directory.
rake font:glyphs[font]           # print list glyphs from a font.
rake font:publish[theme]         # publish directory of glyphs as new font with demo post
rake font:yaml[font]             # print glyphs in yaml given path to font
rake foobar[one,two]             # Fake task
rake post[title,date,overwrite]  # Begin a new post in ./_posts
rake preview                     # Launch preview environment

Here's a demo: http://bewest.github.com/literatewebfont/.

Problem

You have a bunch of symbols deployable as separate images, often used throughout a site. The excellent tools available to us have previously provided CSS sprites, which allow clever authors to compose often used symbols into a single sprite by fine tuning the clipping area controlling the visible viewport. You may have a solution that programatically manages these using some vector based format. Given our manifest of symbols it'd be nice if there was a way to easily create a ding-bat web-font to make these symbols usable and rescalable.

Idea

The idea is to have suite of tools that allows you to clone the repo, run rake/make and compile a new font from a manifest of glyphs maintained in ./glyphs.

The ./glyphs directory should contain svg images named hexcode.shorthand.glyph.svg

Each glyph will be included in the font and mapped to it's unicode code to it's shorthand name in a css file. Immediate development is in lib.hello.py.

Here are the glyph specs:

By default, fontforge glyph dimension box is 1000 x 1000 postscript units. The baseline line is set at 0pt. ascenders goes up to 800pt and descender down to 200pt.

In Inkscape, create a new document In document properties, set all your units in inkscape in pixels (px). Set the document dimension to 1000px x 1000px Set an horizontal guide at 200px http://ospublish.constantvzw.org/tools/import-inkscape-in-fontforge

The resulting fonts are placed in ./fonts.

It's possible that this could be combined with a fancy js svg editor to allow users to edit glyphs in their browser, save changes to their local disk, compile and upload the new font.

Glyph mappings could be from U+F0000 to U+FFFFD http://en.wikipedia.org/wiki/Private_Use_(Unicode)#Private_Use_Areas

We can re-use bootstrap's mappings.

Do not use these glyph names:

blank

Resources

The python support looks more than sufficient to inspect a config for some options (hardcoded), use a directory of glyphs to create a bunch of symbols into a webfont. Since the results are viewable in HTML, a simple tool to update results would be nice.

TODO

A manifest/mapping mechanism would go a long way. Need a quick way to rename unicode glyphs given a mapping. Need another way to generate a mapping (potentially from known css file).

Some js to audit and edit glyphs would be nice. A shape generator that allows downloading svg glyphs would also be cool, and perhaps a better place to start.

Requirements

The excllent jekyll et al, fontforge, python, ttf2eot

Right now it's easier to develop with fontforge installed as a python plugin rather than the other way around, since this allows logging what we are doing etc...

MAC OS/X and brew

I have not tried this:

# https://github.com/mxcl/homebrew/issues/4689
brew install fontforge
brew install ttf2eot

Ubuntu and friends

sudo apt-get install python-fontforge

I couldn't find ttf2eot in my distribution channels, so I compiled it from greyfront's github repo. https://github.com/greyfont/ttf2eot Download it, do it. Here:

git clone git://github.com/greyfont/ttf2eot.git
cd ttf2eot
make
ttf2eot /path/to/git/literatewebfont/bin # or
# put it in your home directory
# cp ttf2eot ~/bin

If only the last step fails, mkdir ~/bin and add export PATH=$PATH:~/bin/ to your profile.

What goes on under the hood

Create a naive webfont

# glob input from glyphs/ prefix output to fonts/glyphs.
./bin/glyphs2webfont.sh glyphs

This will generate a set of css3 webfonts named:

fonts/glyphs.woff
fonts/glyphs.eot
fonts/glyphs.svg
fonts/glyphs.ttf

by importing individual SVG images, 1000px x 1000px from images found by globbing for glyphs/*.glyphs.svg.

# This will generate a set of css3 webfonts named `foo.woff` in
# `fonts/foo.woff` ...  globbing for `foo/*.glyphs.svg`.
./bin/glyphs2webfont.sh foo

The script wraps simple.py which will allow you to customize what happens through some commandline flags.

Extract glyphs

# This will extract each glyph found in a font to an svg vector in
# the `awesome` directory.
./bin/glyphs.py -p awesome/ ../Font-Awesome/font/fontawesome-webfont.ttf

Rebuild a font

# will create font/awesome.[woff|eot] et al.
./bin/glyphs2webfont.sh awesome

Preview your new icons/font

If you run: jekyll --site --auto you can preview your new font by visiting http://localhost:4000/. You may have to edit the html and css to remap your glyphs. TODO: automate stubs for css and html that can be included from a generated template.

Related Projects

glyphance

CLI tool for generating font subsets based on unicode ranges.

21 Nov 2022 3

Hasklig

Hasklig - a code font with monospaced ligatures

06 Apr 2014 5,576

fantasque-sans

A font family with a great monospaced variant for programmers.

18 Nov 2013 7,004

recursive

Recursive Mono & Sans is a variable font family for code & UI

12 Feb 2018 3,118

Fontknife

Rasterize only the glyphs you need. Cut out everything else.

23 Aug 2022 3