When we first began working with our artist to re-skin
Entanglement, we ran into several issues with finding a great font to match the feel of the game.
- It was very difficult for us to find anything regarding licensing for fonts commonly found on a plethora of "Free Font" sites. Many would include phrases like "Check with author for license details" yet include nothing about the original author so that we could do so.
- Most purchased fonts on our computers are specifically licensed for use on up to 5 computers and are not for distribution. This is useless for a JavaScript web game, because, by nature of @font-face, we are providing the font itself on our website for anyone to download.
- Our artist initially chose Herculanum, so, fortunately, we were able find it as a web font on http://webfonts.fonts.com/. This allowed us to subscribe to their web font service and include a link to a small CSS file in our page to use it in our pages' stylesheets. However, we quickly realized this was not a sustainable solution with the impending arrival of Entanglement as a pre-installed web app in the Chrome browser, which we estimated would put us in the "professional" pricing tier, giving us a monthly cost of $100-$500.
- The web font subscription service provided access to a huge selection of fonts, so we thought we might check with Monotype Imaging about just licensing Herculanum by itself. Since Entanglement is hosted on Google App Engine, we found that our web game fell into the "hosting a font on 4 or more servers" category, which again put us well outside of our conservative budget.
Fortunately, while trying to find additional fonts that had licensing information, I came across Jos Buivenga's wonderful selection of fonts at
http://www.exljbris.com/, including Fontin, the font we eventually decided to use for the text in Entanglement. This was a wonderful find because it fit nicely with our theme, was affordable (free), and had specific information about licensing for @font-face use.
 |
| Using Fontin in Entanglement |
For Thwack!! we chose two fonts from
Google Web Fonts. The selection has grown quite a bit since our last foray into font-finding, and it met our requirements in choosing a font: it is affordable (free) and is clearly licensed for @font-face use.
 |
| VT323 and Cherry Cream Soda |
Embedding the two fonts was quite easy. As an example, for Cherry Cream Soda (yes, we picked it solely because of the awesome name), we added one line to our HTML template, "<link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda' rel='stylesheet' type='text/css'></link>", and one line to our stylesheet (for the body tag), "font-family: 'Cherry Cream Soda';". This was much more straightforward than the steps we took to arrive at a solution for Entanglement.
