I love being an independent developer and in today’s fast paced, technology-driven environment there are so many tools that enable developers to work on their own terms. There really is no excuse for being tethered to wires or even to the Internet. The biggest breakthroughs for me have been tools like MAMP/WAMP and Vagrant which allow local development environments to be spun up in seconds, enabling application development without Internet access which saves time and increases productivity.
However, one big barrier to a completely local workflow for me has always been converting custom fonts. Custom fonts mean I need to use an online Font Face converter. Or do I? There are many sites that provide outstanding, free Font Face converters. Unfortunately they often limit the number of fonts you can convert, they can be time consuming to use, and they most definitely require an Internet connection.
I tried a few solutions to move the custom font conversion process offline and the best one I’ve come across is Zoltan Hawryluk’s CSS3 Font Converter (GitHub project). It really is the bee’s knees! It’s a command line font face converter which means you can effortlessly convert your TTF and OTF fonts into a beautiful Font Face stack in a single command without Internet access and without any restrictions.
Zoltan accomplished the amazing feat of bringing together some great tools and cramming them all into one indispensable command line Font Face converter to help you kiss those online Font Face converters goodbye once and for all! Plus, I took a few minutes to write out the quickest steps to get it up and running on OS X so you can be on your way to command line Font Face converter heaven in just a few minutes (Windows installation instructions are here).
The only prerequisite for my CSS3 Font Converter installation method is Homebrew.
Once you have Homebrew installed and working, you’re ready to go:
|1. $ brew install fontforge ttf2eot ttfautohint|
|2. $ brew tap bramstein/webfonttools && brew install sfnt2woff|
|3. Download/clone https://github.com/google/woff2 into any handy dir|
|cd into dir and:|
|$ git submodule init|
|$ git submodule update|
|$ make clean all|
|$ ln -s /path/to/woff2_compress /usr/local/bin/woff2_compress|
|$ ln -s /path/to/woff2_decompress /usr/local/bin/woff2_decompress|
|4. Download/clone https://github.com/zoltan-dulac/css3FontConverter into /usr/local/bin/css3FontConverter|
|5. Add these two lines to ~/.profile|
|# Convert TTF/OTF font to @font-face font stack|
|6. Restart your Terminal|
|7. In Terminal, cd into the dir containing your font and run:|
|$ fontstack font-to-convert.ttf|
If you run into any issues you can leave a comment and I’ll do my best to troubleshoot. Enjoy this delicious offline Font Face converter!