Wednesday, August 28, 2013

Generating Web Fonts Locally | Fixing CSS3111

Web developers such as myself find themselves struggling with a recent issue:
Convert system fonts to web usable font formats (EOT, WOFF, TTF, SVG).

There are a few good sites out there that will allow uploading a font and instantaneously get the necessary fonts and CSS styles to include on an existing website. Unfortunately, these sites may not work are expected:
  • The fonts are not supported by the provider
  • The fonts are generated but display poorly with defects
  • The provider has blocked the conversion of the current font due to copyright issues
  • Some browsers experience script errors while using specific font formats
    • E.g. CSS3111: @font-face encountered unknown error. (EOT, Internet Explorer)
While trying solutions (such as setting consistent font names by editing the font with FontForge) that did not work for me, I ended up finding the CSS3FontConverter. The idea is to set up the applications on a local machine enabling us to generate the fonts ourselves with open source software without using online generator websites.

The objective of this post is to document the set up procedure in Windows, which can be very hard and error-phrone.

  1. Install Cygwin.
    The latest x86/x64 binary DLL is fine.
    Remember to pick a geographically near server and make sure you select additional packages to avoid later issues.
    • Add wget
    • Add gcc
    • Add make
    • Add GnuPG (gpg)
  2. Install Java and add the /bin folder to the Environment Variable "PATH"
  3. Install FontForge and add the /bin folder to the Environment Variable "PATH"
  4. Download the binary of Batik and extract it exactly in the below path to avoid issues
    c:\Program Files\Batik\batik-1.7 (the last folder is included in the zip so you can "extract here" on the "Batik" folder withing "Program Files")
  5. Download sfnt2woff for Windows. Place it under Cygwin's bin folder.
  6. Download ttf2eot for Windows. Place it under Cygwin's bin folder.
  7. Add Cygwin's bin folder to the Environment Variable "PATH".
  8. Download CSS3FontGenerator and extract it over the Cygwin folder.
  9. Copy the desired font(s) to the same folder where you extracted the application in step 8.
  10.  Finally, start Cygwin and run "./css3FontGenerator/ *.TTF".
Hopefully all with work out and your eot/woff/ttf/svg font formats will be generated correctly and be ready to use on any website, without CSS3111 issues.

Online Web Font Generators:
Font Squirrel

Everything Fonts


Convert Fonts


No comments:

Post a Comment