Font tool basic and lite
Font tool version 1, came about after spending some time using fonts with CSS3. It started out fine, but after several months of using the tool, a few holes came to light. These will be addressed in future iterations.
At the time of it’s authoring, Google fonts had only been released and other companies, like Typekit are paid for solutions and so not suitable.
Fontsquirrel/Font-face, on the other hand, is free. You can download many fonts or convert your own creations.
There are many positives to using Font-face, the negatives are the lag in loading the fonts. Even if they are cached, as they are on this sit, the time it takes to load is unacceptable to some.
My advice? Use them on headers. Your site will load quicker that way.
Future iterations of the tool will include Google fonts and other methods of adding fonts to your site. Until then, here are a few tips and a few hacks, when it doesn’t go as well as it should.
- Use the Basic setting when you are using a Font without drop shadows (like on this site).
- Use the Lite version to add up to two drop shadows on it.
You can select h1-h6 and p tags.
Uploading a font: This started off as a good idea, but its limitations became apparent after a few months. The font itself, if downloaded from Fontsquirrel, will be zipped up. It will need to be a .TTF file. Just upload them and the renaming, importing and embedding should happen instantly.
You can easily hack the zip should things not got to plan.
- The font you want to use is an .otf font and not a .ttf font (much like the one on this site). I just double clicked on the zip file, opened up and changed the extension of the file from .otf to .ttf I am sure there are many reasons why this is not a good idea, but it works. Remember: This is a hack.
- The font contains both a heavy and light version of the font. The font tool only allows the regular one. Open up the zip file, copy the one you want, paste somewhere else and zip the file up. Upload this as well and you can access the bold and the light.