For too long now have web designers been held back by the dull and repetitive collection of fonts that have been deemed “web safe”. It’s made the internet a typographically dull place, and given that most designers have collections of fonts, it seems criminal that they cannot be used for anything other than images.
Modern browsers have been able to display embedded fonts for some time, but the availability of tools to create the varying formats has been disparate and bewildering. The web site FontSquirrel has a tool that creates them in a simple “kit” of files. They also supply a collection of ready made font kits that you can download and use.
All you need is a copy of Freeway and the Caxton Action, and you can start designing web sites that look different to others.
These may seem long-winded, but are in fact very simple to follow. They help preserve the WYSIWYG abilities of Freeway.
1 - You will need a “kit” of files. Use the FontSquirrel library to download a kit, or you can upload your own font and have a kit made, provided you have the rights to do so. Some fonts user agreements forbid you to embed them in documents or web sites. Check your EULA for the font you want to use.
2 - When you have downloaded your font kit, you need to open it. There will be a folder containing a number of files. Typically, there will be a few files, including a TTF or an OTF.
3 - If you have downloaded the font kit from FontSquirrel, you will want to copy the .ttf or .otf file in to your /Library/Fonts folder. Put the font folder kit somewhere where you can easily reference it (your Freeway project Media folder will be fine). Quit Freeway if it already running and restart it. This will let it “see” your new font.
4 - Open the stylesheet.css file in the font kit folder in a text editor. Locate the Font-Family attribute. Select and Copy the font-family name. It will be in quotes. Don’t copy those.
5 - In Freeway, go to Edit>Font Sets. Click on the New… button.
6 - Paste the name of the font into the Name: field.
7 - Select the font in the Screen Font drop down (NB - this may be slightly different to the name you pasted in)
8 - In the Alternative fonts field, paste the font name in again, replacing any auto generated content Freeway has added. Put quotes around the name. This is required if your font name has space characters in it.
9 - After the font name, add a comma and type in a short list of web-safe fonts that should display if the browser can not display your fancy font.
10 - OK both windows. You can now start to use the font on your site.
11 - Using the Action tool, sketch an instance of the Caxton Action on the page. Place it on the pasteboard, and make sure it’s NOT a layered item.
12 - Open the Actions Palette and select the CSS file in the folder of files you downloaded. Optional - select the font in the drop down in the Actions Palette. This will help the Action show the font in a preview.
13 - Sketch an HTML text box on your page
14 - Type in some text
15 - Select the text, and using the Inspector Palette, apply the new font to it. You can colour it as usual.
1 - Some font kits from FontSquirrel contain more than one font. You will want to repeat steps 5 - 10 for each one, using the appropriate font-family name in the stylesheet.css file for each. Some observations on multiple fonts in a family here…
2 - Bold and Italic buttons and the strong and em styles may not work. You will need a bold and italic weight for each font for those which don’t (not all FontKits contain these weights). Read a bit more about multiple weights here.
3 - Not all browsers will work with this. There will also be differences between font rendering between OSes, and these can cause text to flow differently. Check your designs in as many browsers and platforms as possible.