Web Fonts
There are a few ways to work with fonts on the web. High-resolution screens and the ability to embed any font is an important, relatively new feature for websites established over the past couple of years. It has changed the way you can work with fonts on the web. Below I'll list commonly used options and explain their features and differences.
Web-Safe Fonts
Web-safe fonts are fonts likely to be displayed on a wide range of computer systems without embedding. If a visitor to a Web site does not have the specified font installed, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.
The font-family property should hold several font names as a "fallback" system, to ensure better compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, let the browser pick a similar font in the generic family if no other fonts are available.
Pros:
- Fonts already exist in someone's computer so they don't have to be loaded first. This results in faster page load times. No license is necessary since the font already exists on someone's computer.
Cons:
- Very limited amount of fonts and weights available. Unpredictable results.
Example:
CSS code:
p { font-family: "Times New Roman", Times, serif; }
<p>This is an example paragraph. The text sits inside paragraph tags.</p>
Embedding fonts using the @Font-Face Rule
If you embed your own font you don't need to worry if it's part of someone else's system fonts. Any typeface can be embedded and will be displayed. Like any other files such as images, videos etc. the font files need to exist in your site folder (or another place on a server). People also call these "self-hosted" fonts (the other option is fonts hosted on external servers).
If you embed fonts yourself you need the font files in 4 different file types to make them compatible with all major browsers (EOT, SVG, TTF, WOFF). Since a font you own usually doesn't come in all those different file types you need to convert it first. There are online tools that can do this for you such as www.fontsquirrel.com. There you can upload for font and download the converted fonts with all the necessary files types.
Below is an example on how to embed the font DIN regular in 4 different weights. You can put the CSS either in your CSS file amongst the other rules or you can keep it separate in another style sheet file that contains only the font rules (in that case you'd need to link this additional CSS in your HTML). Remember that all the fonts in all the 4 different file types need to exist in your fonts folder.
CSS code:font-family: 'din_lightregular';
src: url('../fonts/din_light-webfont.eot');
src: url('../fonts/din_light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/din_light-webfont.woff') format('woff'),
url('../fonts/din_light-webfont.ttf') format('truetype'),
url('../fonts/din_light-webfont.svg#din_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'din_mediumregular';
src: url('../fonts/din_medium-webfont.eot');
src: url('../fonts/din_medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/din_medium-webfont.woff') format('woff'),
url('../fonts/din_medium-webfont.ttf') format('truetype'),
url('../fonts/din_medium-webfont.svg#din_mediumregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face { font-family: 'dinbold';
src: url('../fonts/din_bold-webfont.eot');
src: url('../fonts/din_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/din_bold-webfont.woff') format('woff'),
url('../fonts/din_bold-webfont.ttf') format('truetype'),
url('../fonts/din_bold-webfont.svg#dinbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'din_blackregular';
src: url('../fonts/din_black-webfont.eot');
src: url('../fonts/din_black-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/din_black-webfont.woff') format('woff'),
url('../fonts/din_black-webfont.ttf') format('truetype'),
url('../fonts/din_black-webfont.svg#din_blackregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then you can apply the font family declaration to an element:
CSS code:font-family: 'din_blackregular';
font-size: 48px;
margin: 20px;
}
p {
font-family: 'din_lightregular';
font-size: 24px;
margin: 20px;
}
<h1>This headline uses DIN black</h1><br />
<p>This paragraph uses DIN light.</p>
Pros:
- You can use any typeface this way. Predictable results (typeface shows more or less exactly like you intend to).
Cons:
- Fonts have to be downloaded first. The more fonts you embed, the longer the initial page load times. You may see a different (browser-default) fonts for a second or two during the loading process.
- Licensing issues: The license to use the font must permit its distribution using @font-face.
Payed Online Font Services (usually subscription fees)
Big difference to the above is that you don't host the fonts yourself. The font files are hosted externally and are being linked inside your HTML's head section. A popular font service is Typekit which now comes with the Adobe CC. Other, similar services are Fonts.com (huge library.)
After you choose your font from the service's library you'll get an embed code which you add to your HTML documents.
Pros:
- Usually big, well organized font libraries that can help you find a font easily (search tools).
- Licensing covered by the service.
- Fonts are tested for screen usage.
Cons:
- You can only see the actual font when your site is published on an online server. This can make development difficult!
- Not free (usually subscriptions required). Still much more affordable than owning web fonts.
Frees Services
Google Fonts, for example, is a free font service but you have to do some research to find quality there. But using Google fonts has advantages over the above-mentioned font options. Here's a simple example of how to link the font "Roboto Slab":
HTML code:<title>Google Fonts</title>
<!-- Roboto Slab: -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 class="roboto-slab thin">RobotoSlab / Thin, </h1>
<h1 class="roboto-slab light">RobotoSlab / Light, </h1>
<h1 class="roboto-slab normal">RobotoSlab / Normal</h1>
<h1 class="roboto-slab bold">RobotoSlab / Bold</h1>
</body>
.roboto-slab { font-family: 'Roboto Slab', serif; }
/* Font Weights: */
.thin { font-weight: 100; }
.light { font-weight: 300; }
.normal { font-weight: 400; }
.bold { font-weight: 700; }
Pros:
- Free. No license required.
- You can develop locally on your computer and still see the font as long as you're online.
- Simple. Easy to use.
Cons:
- Limited search and filter options make it less easy to find a font.
- Not many quality fonts available.
The Google Fonts user interface improved quite a bit over the last few years. https://fonts.google.com
Other free font services are Font Library or Font Squirrel, for example.