FontForge, as far as I can tell, is the best free font editing and conversion tool available for all operating systems. The problem is, the average user may have difficulty getting it to work under Windows. Because a lot of web designers out there may not be familiar with UNIX command shells and Cygwin, I have written this blog post to help.
Entries Tagged as 'Technologies'
Installing Cygwin and FontForge for Windows
February 27th, 2011 by zoltan · 42 Comments
Tags: @font-face · converting · Cygwin · FontForge · Fonts
Converting @font-face Fonts Quickly In Any OS
February 20th, 2011 by zoltan · 9 Comments
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 Font Squirrel’s generator. The result is a shell script that uses FontForge, Batik and Readable Web’s EOTFast to do the heavy lifting.
Tags: @font-face · converting · CSS · CSS3 · Cygwin · FontForge · Fonts
The CSS3 matrix() Transform for the Mathematically Challenged
January 7th, 2011 by zoltan · 25 Comments
The CSS3 transform property can do some really cool things – with it, web designers can rotate, scale, skew and flip objects quite easily. However, in order for designers to have fine-grained, pixel level control over their transforms, the matrix() function is hard to beat. This post explains what it does and the math behind the code. It also includes a tool to help you create matrix() transforms easily using HTML5 Drag and Drop for the user interface and the Sylvester JavaScript library to do the mathematics needed to calculate the matrix values so you don’t have to (in case you have difficulties with math, or if you just are lazy and don’t want to be bothered).
Tags: CSS · CSS3 · Drag and Drop · math · transform
Cross Browser HTML5 Ruby Annotations Using CSS
October 29th, 2010 by zoltan · 7 Comments
Ruby Characters, although used originally to help people read complicated Chinese and Japanese characters, can also be used to annotate all types of information to written text. This article shows how you can use it in browsers that support it, but also in ones that don’t using a simple stylesheet.
Tags: CSS · CSS3 · HTML · HTML5 · Internationalization · Polyfills · Ruby
Using CSS3-Style Transforms in IE Without JavaScript
September 12th, 2010 by zoltan · 6 Comments
The IE Transforms Translator will allow you do Cross Browser CSS3-style Transformations without using a JavaScript library like cssSandpaper.
Giving Challenged @font-face Fonts The Italics Makeover
September 7th, 2010 by zoltan · 5 Comments
Have a font that doesn’t have an italics variant? Does your browser try to attempt to “obliquify” it (badly) or not do anything at all? There is a simple solution to this problem using CSS3 Transforms.
Tags: @font-face · CSS · CSS3 · Fonts · transform
How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together
September 2nd, 2010 by zoltan · 14 Comments
Ever had a problem with using IE’s Alpha Visual Filter and getting blocky text? A solution has been found, and it doesn’t use JavaScript. I expect to hear a sigh of relief from many developers.
Tags: @font-face · ClearType · CSS · CSS3 · Fonts · IE Visual Filters
Coding Colors Easily Using CSS3 hsl() Notation
August 28th, 2010 by zoltan · 15 Comments
The seemingly impossible task of coming up with color codes off the top of your head can be done easily using CSS3′s hsl color notation. Read how you can use this “human-friendly” and how it can work in the few browsers that don’t support it natively.
Tags: Color · CSS · CSS3 · hsl/hsla · Polyfills
Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets
July 27th, 2010 by zoltan · 27 Comments
Next generation web forms using HTML5 is hard to do today due to spotty browser support. I demonstrate how a suite of JavaScript libraries can be used to help us use HTML5 Forms today.
Tags: Forms · HTML5 · JavaScript · Polyfills
visibleIf – Dynamic and Complex Interactive Forms Using HTML5 Custom Data Attributes
June 20th, 2010 by zoltan · 6 Comments
One thing HTML5 forms can’t do is dynamically show and hide form elements according to the data that the user has already entered. My new library, visibleIf gives you a very easy way to do this using the HTML5 data- attributes.
Tags: Custom Data Attributes · Forms · JavaScript

