{"id":6441,"date":"2013-09-22T19:09:08","date_gmt":"2013-09-22T23:09:08","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?page_id=6441"},"modified":"2015-06-27T12:56:19","modified_gmt":"2015-06-27T16:56:19","slug":"the-css3-font-converter","status":"publish","type":"page","link":"http:\/\/www.useragentman.com\/blog\/the-css3-font-converter\/","title":{"rendered":"The CSS3 Font Converter"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Note:<\/h3>\n<p>More details on this script can be seen on these posts:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.useragentman.com\/blog\/2011\/02\/20\/converting-font-face-fonts-quickly-in-any-os\/\">Converting @font-face Fonts Quickly In Any OS<\/a>\n<li><a href=\"https:\/\/www.useragentman.com\/blog\/2013\/09\/20\/better-web-typography-with-font-weight-autohinting-and-font-feature-settings\/\">Better Web Typography With font-weight, Autohinting and font-feature-settings<\/a><\/li>\n<\/ul>\n<p>Also note that Michael of <a href=\"http:\/\/cfxdesign.com\/\">CFX Design<\/a> has been kind enough to publish <a href=\"https:\/\/gist.github.com\/CFXd\/9ddbba4607ceec5a2a2e\">a gist that will help people get this up and running quickly<\/a>.\n<\/p>\n<\/div>\n<p>The CSS3 Font Converter is a command line script that converts TrueType and OpenType fonts to all the other @font-face formats (i.e. EOT, SVG and WOFF).  It also can implement auto-hinting, report on if a font supports and <code>font-feature-setting<\/code> tags (e.g. ligatures, true small-caps, old-style numerals, etc).  It can run on any operating system that can run Bash scripts, including Mac OS X, Linux and Windows (using Cygwin).<\/p>\n<p>If you are not familiar or comfortable with using the UNIX command line, this script may not be for you.  If you are willing to learn, I highly encourage it, since there have been many times in my web development career that it has proved useful and a huge time-saver.  A good place to start is <a href=\"http:\/\/freeengineer.org\/learnUNIXin10minutes.html\">Learn UNIX in 10 minutes<\/a> by <a href=\"http:\/\/freeengineer.org\">Cliff Johnson<\/a>.<\/p>\n<h2>Installation<\/h2>\n<p>I have tried to make this tool as easy to use as possible.  If you follow these easy steps, it should work.  If you have trouble installing the tool after you have followed all these steps, please leave a comment at the end of this post &mdash; I really want to make this as bulletproof as possible.<\/p>\n<ol>\n<li><strong>If you are using Windows XP\/Vista\/7, install <a href=\"http:\/\/www.cygwin.com\">Cygwin<\/a> with the FontForge package<\/strong>. If you have never done this before, <a href=\"https:\/\/www.useragentman.com\/blog\/?p=2339\">I have created a supplementary blog post to walk you through the installation process<\/a>.  If you have installed Cygwin before, you still may want to read the last half of the article, since installing FontForge can be difficult under Cygwin (at least it was for me until I did some digging).<\/li>\n<li><strong>Download and Install <a href=\"http:\/\/fontforge.sourceforge.net\/\">FontForge<\/a> <\/strong>(if you are a Windows user, this is covered in step one). There are complete instructions on how to do this under <a href=\"http:\/\/fontforge.sourceforge.net\/mac-install.html\">OS X<\/a>, and <a href=\"http:\/\/fontforge.sourceforge.net\/nix-install.html\">Linux<\/a> as well.  <strong>Update (May 14, 2011):<\/strong> The Linux page doesn&#8217;t mention this, but if you are an Ubuntu user, you can use <code>apt-get<\/code> to do the installation for you easily:<br \/>\n<blockquote class=\"code\">\n<pre>\r\nsudo apt-get install fontforge\r\n<\/pre>\n<\/blockquote>\n<p>Thanks to Richard Curran for pointing this out.<\/li>\n<li><strong>Download <a href=\"http:\/\/eotfast.com\/\">EOTFast<\/a><\/strong> (if you develop using Windows) <strong>or  <a href=\"http:\/\/code.google.com\/p\/ttf2eot\/\">ttf2eot<\/a><\/strong> (for OS X and Linux, <a href=\"http:\/\/www.tips-tricks.net\/tag\/ttf2eot\/\">installation instructions are here<\/a>).  <\/li>\n<li><strong>Download the <a href=\"http:\/\/people.mozilla.com\/~jkew\/woff\/\">sfnt2woff<\/a> package<\/strong> (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).<\/li>\n<li><strong>Download <a href=\"http:\/\/www.freetype.org\/ttfautohint\/#download\">ttfautohint<\/a> <\/strong> (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).<\/li>\n<li><strong>Download the <a href=\"https:\/\/github.com\/zoltan-dulac\/css3FontConverter\">CSS3 Font Converter<\/a><\/strong> from GitHub and unpack the contents in your path someplace.<\/li>\n<li><strong>Open up a terminal window<\/strong> (under Cygwin, that would be the either the &#8220;Cygwin Bash Shell&#8221;, or, better yet, &#8220;rxvt native&#8221; if you have that installed). Then, <code>cd<\/code> into the directory that you unpacked the CSS3 Font Converter, and edit <code>convertFonts.sh<\/code> (if you are using Windows, <strong>don&#8217;t use notepad to edit this file<\/strong>, since shell scripts don&#8217;t like to be saved as Windows text.  If you are familar with it, use <code>vim<\/code> instead).  You will need to edit the first few lines:<br \/>\n<blockquote class=\"code\">\n<pre>\r\n#!\/bin\/bash\r\n\r\n#########################################################################\r\n## CONFIGURATION AREA: This stuff is the only stuff you may need to     #\r\n##                     change.                                          #\r\n#########################################################################\r\n\r\n# The path should contain the directories where EOTFAST-1.EXE, ttf2eot,\r\n# fontforge, and all the scripts in the @Font-Face Contruction Set reside.\r\n# Uncomment the line below with the right directories.  Remember the\r\n# $PATH at the beginning of the string, or the script will forget what\r\n# was originally in the PATH.\r\n<span class=\"hilite\"># PATH=\"$PATH:\/some\/directory:\/some\/other\/directory\/\"<\/span>\r\n\r\n....\r\n<\/pre>\n<\/blockquote>\n<p>If you haven&#8217;t installed the other packages in directories in your PATH, you must uncomment the <code>PATH<\/code> line and edit it so that it contains them.\n<\/li>\n<li><strong>If all is well, you should now be ready to convert fonts.<\/strong>  To test, create a new directory, download and unpack the <a href=\"http:\/\/www.dafont.com\/old-london.font\">Old London Font from Dafont.com<\/a> into it, and execute the following command:<br \/>\n<blockquote class=\"code\">\n<pre>\r\n$ convertFonts.sh *.ttf\r\n<\/pre>\n<\/blockquote>\n<p>If all is successful, you should see output similar to this:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nConverting OldLondon to eot\r\n(Using EOTFAST)\r\nConverting font \"Old London\"\r\nSuccessfully written \"OldLondon.eot\"\r\nConverting OldLondon to svg\r\nConverting OldLondon to woff\r\nConverting OldLondonAlternate to eot\r\n(Using EOTFAST)\r\nConverting font \"Old London Alternate\"\r\nSuccessfully written \"OldLondonAlternate.eot\"\r\nConverting OldLondonAlternate to svg\r\nConverting OldLondonAlternate to woff\r\nWriting Stylesheet ...\r\nExtracting SVG ID\r\nGetting Font Name\r\nExtracting SVG ID\r\nGetting Font Name\r\nDONE!\r\n<\/pre>\n<\/blockquote>\n<p>Not only does it convert the TrueType font in all the web formats, it produces a nice style sheet you can<br \/>\nlink to:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n@font-face {\r\n        font-family: 'OldLondon';\r\n        src: url('OldLondon.eot?') format('eot'), \r\n             url('OldLondon.woff') format('woff'), \r\n             url('OldLondon.ttf')  format('truetype'),\r\n             url('OldLondon.svg#OldLondon') format('svg');\r\n}\r\n\r\n@font-face {\r\n        font-family: 'OldLondonAlternate';\r\n        src: url('OldLondonAlternate.eot?') format('eot'), \r\n             url('OldLondonAlternate.woff') format('woff'), \r\n             url('OldLondonAlternate.ttf')  format('truetype'),\r\n             url('OldLondonAlternate.svg#OldLondonAlternate') format('svg');\r\n}\r\n<\/pre>\n<\/blockquote>\n<\/li>\n<\/ol>\n<h2>Options<\/h2>\n<p>The CSS3 Font Converter can not only convert Fonts in several different ways, but it can also give information about the fonts it generates<\/p>\n<h3><code>--use-font-weight<\/code><\/h3>\n<p>This option will merge all font-weights and styles under the same font name.  This option will likely crash Apple Mobile Safari running under iOS versions less than 4.0 &mdash; <strong>to avoid this, the converter will <em>not<\/em> convert fonts to SVG when this option is used.<\/strong>  Also note that only the first four weights and styles will be recognized under IE7 and 8.<\/p>\n<h3><code>--use-font-stretch<\/code><\/h3>\n<p>This option will merge all condensed and expanded fonts under the same font name as the normal font.  It is recommended *not* to use this method currently, since at the time of this writing, font-stretch is only supported by  Firefox =&gt; 9 and IE =&gt; 9.<\/p>\n<h3><code>--autohint<\/code><\/h3>\n<p>This option will hint\/re-hint fonts (using ttfautohint by default, or Adobe Font Development Kit for OpenType if using &#8211;autohint=adobe). Note that this option will create a bunch of files prefixed with &#8216;hinted-&#8216;.  Attempting to use this option on files already prefixed with &#8216;hinted-&#8216; will result in an error.<\/p>\n<h3><code>--use-font-prefix<\/code><\/h3>\n<p>This option will put a prefix in front of a font name.  For example<\/p>\n<blockquote class=\"code\">\n<pre>\r\nconvertFonts.sh --use-font-prefix --autohint --use-font-prefix=<span class=\"hilite\">new-<\/span> peanuts.ttf\r\n<\/pre>\n<\/blockquote>\n<p>will convert all the OTF fonts in the current working directory and produce a stylesheet that with the following font names:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n@font-face {\r\n  font-family: 'new-Peanuts';\r\n  src: url('<span class=\"hilite\">new-<\/span>peanuts.eot?') format('eot'),\r\n       url('<span class=\"hilite\">new-<\/span>peanuts.woff') format('woff'),\r\n       url('<span class=\"hilite\">new-<\/span>peanuts.ttf')  format('truetype'),\r\n       url('<span class=\"hilite\">new-<\/span>peanuts.svg#Peanuts') format('svg');\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>Note it also changes the names of the converted font files as well.<\/p>\n<h3><code>--output<\/code><\/h3>\n<p>This option allows the user to change the file name of the font stylesheet the converter produces from <code>stylesheet.css<\/code>.  For example:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nconvertFonts.sh <span class=\"hilite\">--output=peanuts.css<\/span> peanuts.ttf\r\n<\/pre>\n<\/blockquote>\n<p>names the font&#8217;s stylesheet <code>peanuts.css<\/code><\/p>\n<h3><code>--show-features<\/code><\/h3>\n<p>Presents the user with a list of OpenType feature tags a font supports which can be used inside a style sheet using the CSS3 <code>font-feature-settings<\/code> property (more information about OpenType feature tags can be found in the article <a href=\"http:\/\/useragentman.com\/blog\/K7V7p\">Better Web Typography With <code>font-weight<\/code>, Autohinting and <code>font-feature-settings<\/code><\/a>.  The font can be in either be OpenType or TrueType.  For example:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nconvertFonts.sh <span class=\"hilite\">--show-features<\/span> peanuts.ttf\r\n<\/pre>\n<\/blockquote>\n<p>will show the OpenType tag features in the following format:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nFont: Calendas-Plus.otf\r\n'kern' Horizontal Kerning in Latin lookup 0\r\n'aalt' Access All Alternates in Latin lookup 0\r\n'aalt' Access All Alternates in Latin lookup 1\r\n'smcp' Lowercase to Small Capitals in Latin lookup 2\r\n'onum' Oldstyle Figures in Latin lookup 3\r\n'lnum' Lining Figures in Latin lookup 4\r\n'case' Case-Sensitive Forms in Latin lookup 5\r\n'dlig' Discretionary Ligatures in Latin lookup 6\r\n'sups' Superscript in Latin lookup 7\r\n'liga' Standard Ligatures in Latin lookup 8\r\n'ornm' Ornaments in Latin lookup 9\r\n'swsh' Swash in Latin lookup 10\r\n'sinf' Scientific Inferiors in Latin lookup 11\r\n'numr' Numerators in Latin lookup 12\r\n'ordn' Ordinals in Latin lookup 13\r\n'frac' Diagonal Fractions in Latin lookup 14\r\n'dnom' Denominators in Latin lookup 15\r\n'salt' Stylistic Alternatives in Latin lookup 16\r\n\r\nInformation on these features can be found at these URLS: \r\n  - http:\/\/www.microsoft.com\/typography\/otspec\/featurelist.htm\r\n  - http:\/\/partners.adobe.com\/public\/developer\/opentype\/index_tag3.html\r\n<\/pre>\n<\/blockquote>\n<p>Note that this option does <em>not<\/em> convert the font(s) given.<\/p>\n<h2>Download<\/h2>\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>Note: More details on this script can be seen on these posts: Converting @font-face Fonts Quickly In Any OS Better Web Typography With font-weight, Autohinting and font-feature-settings Also note that Michael of CFX Design has been kind enough to publish a gist that will help people get this up and running quickly. The CSS3 Font [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-6441","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/pages\/6441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=6441"}],"version-history":[{"count":10,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/pages\/6441\/revisions"}],"predecessor-version":[{"id":7003,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/pages\/6441\/revisions\/7003"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=6441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}