About Icon fonts
About WebfontsSubmit fonts
- 3D
- Asian
- Bold
- Calligraphic
- Cartoon
- Classic
- Comic
- Computer
- Crazy
- Decorative
- Dingbats
- Distorted
- Drippy
- Entertainment
- Famous
- Fancy
- Foreign
- Funky
- Futuristic
- Gothic
- Graffiti
- Handwriting
- Heavy
- Hi-tech
- Holiday
- Hollow
- Horror
- Icon
- Industrial
- Kids
- Liquid
- Messy
- Modern
- Movie
- Musical
- Narrow
- Old fashioned
- Outdoor
- Outline
- Retro
- Round
- Sans serif
- Sci-fi
- Script
- Serif
- Stencil
- Stylish
- Texture
- Thick
- TV show
- Typewriter
- Wavy
- Western
- Wide
- Wild
- Wood
Font categories
About Web fonts
About Webfonts and CSS @font-face
Webfonts are becoming increasingly popular and with this popularity new issues arise. One of them is quality. Many of the fonts that are available free or otherwise throughout the Internet are not of sufficient quality to be used as Webfonts. Another issue is the compatibility of Web browsers and mobile devices. Last but not least is the licensing of Webfonts and determining the most appropriate model.
CROSS-BROWSER COMPATIBILITY
Like a bunch of little kids, all major browser makers decided to go their own way with Webfont formats. Really? YES, really! Here is the list:
- Internet Explorer supports EOT (and IE9 WOFF)
- Mozilla browsers support OTF, TTF (and FF3.6+ WOFF)
- Safari and Opera support OTF, TTF, SVG (and Safari5.1+, Opera11.10+ WOFF)
- Chrome supports TTF, SVG (and Chrome6.0+ WOFF)
- Mobile device browsers such as Safari want SVG only
It looks like WOFF will become the standard, but only time will tell. WOFF (Web Open Font Format) is a font format, based on the SFNT file structure (TrueType and OpenType fonts) and specifically designed for Web use with the @font-face declaration. It was developed by Jonathan Kew (Mozilla), Tal Leming (Type Supply) and Erik van Blokland (LettError). A WOFF font is a repackaged version of a TrueType or OpenType font in a compressed form. The font format allows metadata and private-use data to be included separately from the font data. To convert existing TTF/OTF fonts to WOFF format (subject to appropriate licensing), there is a command-line tool called sfnt2woff. Precompiled versions for Mac OS X and for Windows are available. Run the program from the command prompt.
Embedded OpenType (.eot) is a font format similar to TrueType, but with modifications to make it usable on Web sites. EOT allows Webfonts to be bound to a specific domain. EOT fonts can use subsetting and be compressed. To convert TTF fonts to compressed EOT files you can use EOTFAST.
Note: in Firefox you may have to turn ON Web fonts usage. In Options > Content > (Fonts & Colors) Advanced you need to check "Allow pages to choose their own fonts, instead of my selections above" if it is not checked.
MAKING IT WORK
To make it all work you will first need a style definition such as:
@font-face {
font-family: 'MyWebfont';
src: url('MyWebfont-webfont.eot');
src: url('MyWebfont-webfont.eot?#iefix') format('embedded-opentype'),
url('MyWebfont-webfont.woff') format('woff'),
url('MyWebfont-webfont.ttf') format('truetype'),
url('MyWebfont-webfont.svg#MyWebfont') format('svg');
font-weight: normal;
font-style: normal;
}
If you want to add a local declaration that tells the browser to use a fictional font name (f.e. ò∫) that will definitely not be present on a local machine you need to use the following style definition:
@font-face {
font-family: 'MyWebfont';
src: url('MyWebfont-webfont.eot');
src: local(‚ò∫'),
url('MyWebfont-webfont.eot?#iefix') format('embedded-opentype'),
url('MyWebfont-webfont.woff') format('woff'),
url('MyWebfont-webfont.ttf') format('truetype'),
url('MyWebfont-webfont.svg#MyWebfont') format('svg');
font-weight: normal;
font-style: normal;
}
The font-weight and font-style need to be set to 'normal' to ensure that all browsers default to the same values. This way you can apply a bold or other style in the CSS later. And as you can see you always need 4 versions of the font. The .eot, .woff, .ttf or .otf, and .svg. Isn't is wonderful, all that cooperation in the world?
To use the defined font in your Web pages, you can now add the font-family tag to a class in your CSS stylesheet or insert it directly into the HTML element you wish to use the font in. Always include one or more fonts to fall back on just in case the Webfont does not work for whatever reason.
As a CSS definition: .myline { font-family: MyWebfont, sans-serif }
On a page element: <div style="font-family: MyWebfont, sans-serif"></div>
Or if class is defined in a stylesheet: <div class="myline"></div>
STYLE LINKING
If you have a Webfont that has more than one style, say f.e. normal, bold and italic, it is better to link the style. The advantage of doing this is that you only have to refer to the same family name and use the font-style and font-weight CSS tags to tell the browser which font style to use.
Normal - always put the normal style first!
@font-face {
font-family: 'MyWebfont';
src: url('MyWebfont-webfont.eot');
src: url('MyWebfont-webfont.eot?#iefix') format('embedded-opentype'),
url('MyWebfont-webfont.woff') format('woff'),
url('MyWebfont-webfont.ttf') format('truetype'),
url('MyWebfont-webfont.svg#MyWebfont') format('svg');
font-weight: normal;
font-style: normal;
}
Bold
@font-face {
font-family: 'MyWebfont';
src: url('MyWebfont-bold-webfont.eot');
src: url('MyWebfont-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('MyWebfont-bold-webfont.woff') format('woff'),
url('MyWebfont-bold-webfont.ttf') format('truetype'),
url('MyWebfont-bold-webfont.svg#MyWebfont') format('svg');
font-weight: bold;
font-style: normal;
}
Italic
@font-face {
font-family: 'MyWebfont';
src: url('MyWebfont-italic-webfont.eot');
src: url('MyWebfont-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('MyWebfont-italic-webfont.woff') format('woff'),
url('MyWebfont-italic-webfont.ttf') format('truetype'),
url('MyWebfont-italic-webfont.svg#MyWebfont') format('svg');
font-weight: normal;
font-style: italic;
}
In the HTML page use the same family-name for an element with the correct font-style and font-weight properties. This will load the correct style.
F.e. on a page element: <div style="font-family: MyWebfont, sans-serif"; font-weight: normal; font-style: italic></div>
THE SIMPLYTHEBEST WEBFONTS KIT
When you download a Webfont from SimplytheBest Fonts, you will get all the necessary font files in the MacRoman subset in a compressed ZIP archive with:
- TrueType Fonts (OTF or TTF) for Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0+
- EOT fonts for IE4 up to IE8
- WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
- SVG fonts for iPad, iPhone and Android 3.0+
- A CSS stylesheet to easily insert into your own CSS file.
If you need a different subset you can use Fontsquirrel @Font-Face Generator or Web-font-generator to generate a new kit. Upload the OTF or TTF font file, make the wanted selections, and generate a custom @font-face kit.
WEBFONT LICENSING
There are several licensing models emerging, from one-time fees to monthly or annual fees. Some even with limited Web sites and even with limited page views. The more page views the more you pay. Some Webfonts are also desktop disabled, which means you need to purchase both versions if you also want to use the font on your computer. This model can easily cost you $800/year or more. To use a font on one Web page or Web site? WOW!
Some font sites adhere to a similar model, but split the font family into separate styles so you can purchase one or more styles or the entire so-called family. F.e. a font with 10 styles would be 10 times f.e. $29 with a family discount, so f.e. $249. Still expensive? Yes, but it is not a bad model if you only want to use one or two of the styles in the family. The pay monthly or annual models are all over the top as far as we're concerned and only meant to increase the revenues of the font sites that sell Webfont licenses this way. Sure, a font can be a bit of work, but it cannot be compared to the time it takes to create a full-blown software application. And they are not priced this way. So why should any font.
SimplytheBest Fonts uses the one-time fee with unlimited Web sites and unlimited page views model, whereby you can choose to purchase the desktop and/or the Webfont license. Buying both earns you a discount.
