Complete guide to custom web fonts
Web fonts are a must when it comes to modern web design and good typography, and nearly all new websites are using custom fonts. There is more than one way to use them on your website and a few things to keep in mind for the best support and performance.
History of fonts on the web
Before we go through how you can use custom web fonts, let me give you a quick brief on how things used to be in the past.
Web safe fonts
In order to serve a font in a web page, the font file needed to be available on the users machine, just like a PowerPoint presentation or a PSD. But different operation systems had different font sets installed on them.
That gave web designers a very limited options of fonts to use, these were the fonts that were installed by default on most of the operation systems.
Some of them are:
- Arial
- Times New Roman
- Comic Sans
- Impact
- Tahoma
You may find out more information and a comprehensive list here.
sIFR and Cufon
sIFR used Javasript and flash to replace text on a page to a flash movie representing the text. It was mainly used for headlines and small pieces of text. It required Javascript to be enabled and to have flash player installed, which prevented it from working on apple’s devices.
Cufon rely of JS as well but unlike sIFR it doesn’t use flash, instead it uses a combination of SVG and VML. Web designer had to use a special Cufon Generator which converts the font file into SVG and VML and then include the javascript that renders the type.
You may visit HTML land CSS book page for more information.
Modern web fonts technique?
Old techniques required a lot of work to use and had huge performance problems because they relied on technologies like JS and Flash to serve type. Luckily we now have easier and faster solutions.
@font-face
A CSS rules that allow authors to specify their own fonts to use instead of being limited with the web safe fonts. What it does in a nutshell is provide the browser with font files and where to find them.
Syntax
- font-family: the name of the font, this can be anything and will be used later to call the font.
- src: the source for the font files, this can be either remote or local.
- font-weight: defines the weight of the font file specified in the “src” field.
- font-style: defines the style of the font file specified in the “src” field.
Calling the font family on the body element:
Font-face tools
I am personally a fan of one of the best font-face generators, the Font Squirrel Web Font Generator. They also offer a wide selection of free fonts you can use for your designs.
How it works is pretty straight forward. You upload your font files (different weights and styles) then Font Squirrel will generate multiple versions of it (TTF, EOT, WOFF … ) to provide as much browser support as possible, generates the CSS for you and provide a downloadable package containing everything you need.
Note: Font Squirrel will give every font variation it’s own font-name, for a better workflow you may standardize the font name for all variations and change the “font-weight’ and “font-style” as required. Check the code below for better understanding.
Browser Support
According to Can I Use browser support goes all the way down to IE8, except for Opera Mini.
You may visit the Mozilla Developer Network for more information
Google Web Fonts
Free and made by Google, it’s one of the most wide spread and easy to use fonts services.
How to use:
- Add fonts to collection.
- Click on the “Use” tab.
- Choose which variations you wanna include, note that the more you choose the more it’s gonna affect page load performance, check the performance meter on the right for reference.
- Choose the character set (leave alone if you don’t know what it means).
- Embed fonts on web page.
- Call font family.
There are three ways you can embed your fonts collection into a web page, either by calling an external CSS stylesheet, a CSS @import rule or by JS. The first is my favorite.
Other web fonts services include but not limited to:
Check Smashing Magazine’s comparison for a better view on the best service to use.
What approach are you using? Do you have anything to add? let us know in the comments.