{"id":2275,"date":"2011-02-20T18:00:00","date_gmt":"2011-02-20T22:00:00","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=2275"},"modified":"2014-10-01T21:55:43","modified_gmt":"2014-10-02T01:55:43","slug":"converting-font-face-fonts-quickly-in-any-os","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2011\/02\/20\/converting-font-face-fonts-quickly-in-any-os\/","title":{"rendered":"Converting @font-face Fonts Quickly In Any OS"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Notes:<\/h3>\n<ul>\n<li><strong>Oct 1, 2014:<\/strong> Support for <a href=\"http:\/\/lwn.net\/Articles\/573348\/\">WOFF2<\/a> fonts have been added!<\/li>\n<li><strong>Sept 23, 2013:<\/strong> Added support for  autohinting, CSS3 <code>font-weight<\/code>, and <code>font-feature-settings<\/code>. More information is available on my subsequent post, <a href=\"http:\/\/useragentman.com\/blog\/K7V7p\">Better Web Typography With <code>font-weight<\/code>, Autohinting and <code>font-feature-settings<\/code><\/a><\/li>\n<li>The official documentation and installation instructions for the CSS3 Font Converter using Mac OSX, Windows or Linux are are now available at <a href=\"https:\/\/www.useragentman.com\/blog\/the-css3-font-converter\/\">the project page on this site<\/a>.<\/li>\n<\/ul>\n<\/div>\n<p><div id=\"attachment_2315\" style=\"width: 260px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/02\/fontConvert.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2315\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/02\/fontConvert.jpg\" alt=\"\" title=\"fontConvert\" width=\"250\" height=\"307\" class=\"size-full wp-image-2315\" \/><\/a><p id=\"caption-attachment-2315\" class=\"wp-caption-text\">Converting fonts quickly will help speed up production of your projects and can easily integrate into your workflow.<\/p><\/div><\/p>\n<p>I love experimenting with web fonts, but using the hodgepodge of free and open source desktop tools to convert them manually is time consuming.  To speed things up a bit, <a href=\"http:\/\/www.fontsquirrel.com\/\">Font Squirrel<\/a> created the excellent <a href=\"http:\/\/www.fontsquirrel.com\/fontface\/generator\">@Font-Face Generator<\/a> web application which not only generates the fonts for you, but also creates a stylesheet a developer can import and use the font immediately.  I really like this tool and it inspired me to write <strong>a command line tool that would create a package like Font Squirrel&#8217;s generator,<\/strong>  The result is a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Shell_script\">shell script<\/a> that uses <a href=\"http:\/\/fontforge.sourceforge.net\/\">FontForge<\/a>, <a href=\"http:\/\/xmlgraphics.apache.org\/batik\/\">Batik<\/a> and <a href=\"http:\/\/readableweb.com\/\">Readable Web&#8217;s<\/a> <a href=\"http:\/\/eotfast.com\/\">EOTFast<\/a> to do the heavy lifting.  It was originally developed under Windows using <a href=\"http:\/\/www.cygwin.com\">Cygwin<\/a>, but I spent a bit of extra time to ensure that it can run under Linux and Mac OS X (using <a href=\"http:\/\/code.google.com\/p\/ttf2eot\/\">ttf2eot<\/a> instead of the Windows-only EOTFast to generate the <code>.eot<\/code> fonts).  Since it runs on OS X, it should run under BSD flavours of Unix as well, but I haven&#8217;t confirmed this (I would be grateful to hear from any BSD users on how it works).<\/p>\n<p>This tool is not intended to replace Font Squirrel&#8217;s tool (as a matter of fact, their tool has a few more options than mine).  However, I find it useful when trying out a variety of fonts on my local web server, so I thought I&#8217;d share.  <\/p>\n<p><strong>If you&#8217;re not familiar with the command line<\/strong> on your particular operating system, this may not be the solution for you. I will, however, give step-by-step instructions on how to install and run the shell script. <strong> If you stumble into any problems<\/strong>, and especially if <strong>you find any inaccuracies<\/strong> with the instructions here, please post a comment below and I will try my best to address them.  I find this script quite useful and would love to help the rest of The Community&trade; as much I can if they would like to use it as well.<\/p>\n<p><a href=\"https:\/\/github.com\/zoltan-dulac\/css3FontConverter\" class=\"exampleLink\">Download the CSS3 Font Converter from GitHub<\/a><\/p>\n<h2>Examples<\/h2>\n<p>Before we start using the tool, I have included a few examples.  They are intended to show situations where a developer may not want to use fonts that are not included on your computer&#8217;s font-stack.<\/p>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Argor Biw Scaqh\/Old London<\/th>\n<th>Peanuts<\/th>\n<th>Aaaaight!!!!!<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"\/tests\/fontConverter\/ArgBiwSc.html\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/02\/argor.png\" alt=\"Screenshot of my Argor Biw Scaqh\/Old London example\" title=\"argor\"  class=\"alignnone size-full wp-image-2321\" \/><\/a><\/p>\n<p>Serif or Sans-serif? How about neither? This example makes heavy use of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Blackletter\">Black Letter<\/a> fonts, which are not included in most operating systems today.<\/p>\n<\/td>\n<td><a href=\"\/tests\/fontConverter\/peanuts.html\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/02\/peanuts.png\" alt=\"Screenshot of Peanuts font example.\" title=\"peanuts\" class=\"alignnone size-full wp-image-2323\" \/><\/a><\/p>\n<p>Why use <a href=\"http:\/\/www.bbc.co.uk\/news\/magazine-11582548\">a font everybody seems to hate<\/a> when there are other cartoony fonts to choose from?<\/td>\n<td><a href=\"\/tests\/fontConverter\/aaaiight.html\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2011\/02\/aaaaight.png\" alt=\"Screenshot of Aaaaight!!!!! example page.\" title=\"aaaaight\" class=\"alignnone size-full wp-image-2325\" \/><\/a><\/p>\n<p>Grafitti style fonts have a unique look all their own.<\/p>\n<\/td>\n<\/tbody>\n<\/table>\n<p>In all cases, the original fonts were in True Type format. The font-converter then converted the fonts into all the other @font-face formats, and created a style sheet containing the appropriate @font-face rules that can be easily imported by the author.<\/p>\n<h2>Usage<\/h2>\n<p>You can convert as many <code>.ttf<\/code> or <code>.otf<\/code> fonts in a directory by using the following command:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nconvertFonts.sh &lt;filelist&gt;\r\n<\/pre>\n<\/blockquote>\n<p>For example, if you wanted to convert all the <code>.ttf<\/code> files in the directory you are in, you could type in the command:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n$ convertFonts.sh *.ttf\r\n<\/pre>\n<\/blockquote>\n<p>The fonts will then be converted to the <code>.eot<\/code>, <code>.woff<\/code>, and <code>.svg<\/code> formats.  It will also generate a stylesheet, <code>stylesheet.css<\/code>, that will produce the <code>@font-face<\/code> rules using <a href=\"http:\/\/www.fontspring.com\/blog\/the-new-bulletproof-font-face-syntax\">The New Bulletproof @Font-Face Syntax<\/a>.<\/p>\n<p>If you are converting <code>.otf<\/code> fonts, a <code>.ttf<\/code> font will be generated first before the other fonts. <\/p>\n<h2>Installation<\/h2>\n<p>Full instructions on how to install this tool and usage documentation is now available on <a href=\"https:\/\/www.useragentman.com\/blog\/the-css3-font-converter\/\">the project&#8217;s home page on this site<\/a>.<\/p>\n<h2>Notes<\/h2>\n<ol>\n<li><strong>FontForge<\/strong> the program that this script uses to do most of the heavy lifting, <strong>can do way more than convert fonts.<\/strong>  It is primarily a <strong>font editor<\/strong>, and I have used it to add accents characters to fonts that don&#8217;t have them (a necessity if you are a Canadian web developer that occasionally has to work with French text).  Play around with it &#8211; it may become as important to you as your graphics editor and your IDE.<\/li>\n<li><strong>The script will use EOTFast when possible<\/strong> to create the <code>.eot<\/code> fonts, and failing that, <strong>will use ttf2eot as a fallback<\/strong>. EOTFast is the preferred solution because it can compress the converted file, but since it only runs under Windows, ttf2eot is needed for the other operating systems.  <del datetime=\"2013-09-22T23:10:34+00:00\">Note that I have experienced a problem running EOTFast under my copy of Windows 7.  I am not sure if this happens on all Windows 7 installations and I would love to hear comments in this area. I have sent a bug report to the developer, but in the meantime, you can use the Windows version of ttf2eot instead.<\/del> This problem has now been resolved.  Thanks to <a href=\"http:\/\/readableweb.com\/\">Richard Fink<\/a> for addressing this issue.<\/li>\n<li><del datetime=\"2013-09-22T23:10:34+00:00\"><strong>I used Batik instead of Fontforge to generate the SVG fonts<\/strong> because I couldn&#8217;t get the Fontforge SVG fonts to work.  I don&#8217;t know why (to be honest, I didn&#8217;t look into it that much).<\/del> The CSS3 Font Converter no longer requires Batik, as FontForge can convert to SVG format correctly.<\/li>\n<li><strong>I did not build a GUI for this tool.<\/strong> If anyone wants to, please feel free.  I would love to hear about it if you do.<\/li>\n<li><strong>The first time you run the script under Cygwin, you may get this warning:<\/strong><br \/>\n<blockquote class=\"code\">\n<pre>cygwin warning:\r\n  MS-DOS style path detected: c:\\Program Files\\Batik\\batik-1.7\/batik-ttf2svg.jar\r\n  Preferred POSIX equivalent is: \/cygdrive\/c\/Program Files\/Batik\/batik-1.7\/batik-ttf2svg.jar\r\n  CYGWIN environment variable option \"nodosfilewarning\" turns off this warning.\r\n  Consult the user's guide for more details about POSIX paths:\r\n    http:\/\/cygwin.com\/cygwin-ug-net\/using.html#using-pathnames\r\n<\/pre>\n<\/blockquote>\n<p>This error won&#8217;t affect how the script runs &#8211; it is just complaining about the way Java is running Batik.  Since Java needs an MS-DOS path, ignore the warning.<\/li>\n<li>Before using the tool, <strong>make sure you back up files that you don&#8217;t want over-written.<\/strong>  I am not responsible for any loss of files because you used the tool incorrectly (or because of a bug in the tool itself).<\/li>\n<li><strong>Before you convert any fonts with this tool, please ensure that you have the legal right to do so<\/strong> by reading the license that comes with the font.<\/li>\n<\/ol>\n<h2>Image Credit<\/h2>\n<p>The image at the top of this post was remixed using works from <a href=\"http:\/\/www.flickr.com\/photos\/mclabigail\/2749884683\/\">Abigail Elder<\/a>, <a href=\"http:\/\/www.flickr.com\/photos\/24oranges\/5146148857\/sizes\/l\/in\/photostream\/\">24oranges.nl<\/a>, <a href=\"http:\/\/www.flickr.com\/photos\/robbie1\/3148808883\/sizes\/o\/in\/photostream\/\">Robbie Sproule<\/a> and <a href=\"http:\/\/www.flickr.com\/photos\/evilpeach\/107445325\/sizes\/o\/in\/photostream\/\">Lisa Brank<\/a>.<\/p>\n<p><a href=\"https:\/\/github.com\/zoltan-dulac\/css3FontConverter\" class=\"exampleLink\">Download the CSS3 Font Converter from GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2011\/02\/fontConvertSmall.jpg\" \/> I love experimenting with web fonts, but using the hodgepodge of free and open source desktop tools to convert them manually is time consuming. This inspired me to write a command line tool that would convert them all at once and create the CSS code like <a href=\"http:\/\/www.fontsquirrel.com\/\">Font Squirrel&#8217;s generator<\/a>.  The result is a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Shell_script\">shell script<\/a> that uses <a href=\"http:\/\/fontforge.sourceforge.net\/\">FontForge<\/a>, <a href=\"http:\/\/xmlgraphics.apache.org\/batik\/\">Batik<\/a> and <a href=\"http:\/\/readableweb.com\/\">Readable Web&#8217;s<\/a> <a href=\"http:\/\/eotfast.com\/\">EOTFast<\/a> to do the heavy lifting.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,121,9,38,96,97,10],"tags":[],"class_list":["post-2275","post","type-post","status-publish","format-standard","hentry","category-font-face","category-converting","category-css","category-css3","category-cygwin","category-fontforge-fonts","category-fonts"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=2275"}],"version-history":[{"count":131,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2275\/revisions"}],"predecessor-version":[{"id":6836,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/2275\/revisions\/6836"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=2275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=2275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=2275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}