Modules > Typography Basics > Aesthetic Web Typography > Technical Web Typography
As Custom Fonts discusses previously in Module 2, custom fonts are non-standard web fonts that are not pre-installed on all computers. Custom fonts, therefore, must be specially embedded before they will be viewable to any user accessing your site. Going through the process of using custom fonts in the first place may seem like a lot of work, but it opens up a level of control and variety standard fonts just cannot compare. Custom fonts allow designers to choose from thousands of additional fonts which are likely better suited to expressing the site’s content and message.
Before we delve into the methods and how-tos of embedding though, it’s important to note that not every typeface you come across can be used on the web. Later on in this module, we’ll talk about issues of availability of fonts for the web from a technical standpoint in Font Formats as well as from a legal standpoint in the sections about Self-hosting fonts.
Unlike designing for print, in which hundreds of thousands of fonts are available, designing for the web does not allow all fonts to be used. This comes from both a legal and technical perspective. Unless you’re using a font service or have purchased a web-use license, you likely won’t have permission to use certain fonts on the web or you likely won’t have all the formats necessary to embed them correctly. Fortunately, many font vendors and type foundries offer web-use licenses that allow you to use custom fonts within your design.
In a world where the right font can make the difference between a good and a great design, there are multitudes of sites with massive font libraries to help you find the perfect custom font. These sites are broken into three types that give you the option between open-source fonts, paid fonts or subscription fonts.
A number of sites out there will allow you to browse, search, and download custom fonts for free. Two popular sites are Google Fonts and Font Squirrel, which allow you to easily search through different styles and categories. Large font foundries such as Adobe provide quality, open-source fonts to sites like these with easy to search font libraries. One of the main benefits of open-source font sites is, of course, that the fonts are entirely free, making them great for experimenting with in your design.
Depending on the budget of your web project, it might be worth considering purchasing a paid font. Sites like Myfonts, Fonts.com and Font Spring are all popular choices. Buying a font will allow for more unique design choices and will more likely help your design when it comes to originality and typographic refinement. Because these sites are paid, and therefore less frequently used, brands using their fonts appear more unique and can stand out from the crowd more easily. Paid fonts are generally higher quality than open-source fonts and are more likely to have full sets of weights and styles, giving you more options within your design.
Finally, subscription fonts are a popular option for putting custom fonts on your website. Sites like Typekit and Fonts.com offer the option to subscribe for a fee and use as many custom fonts as you like. Subscription font sites provide easy to search libraries full of high-quality fonts. One of the main benefits of the subscription option is the freedom it provides for trying out lots of fonts on your site at no extra cost.
As mentioned earlier in this module, font formats are super important for embedding custom fonts onto your website. When you want to embed a custom font, one that’s not installed on all your user’s computers, you’ll need to have different font formats for the font to appear universally on all browsers. Once you’ve found and purchased the font you want to use, you just need to include the font files with the rest of the files on your web server and it will be automatically downloaded to the user when needed. We’ll talk more specifically about how to embed fonts later on in Embedding with @font-face, but for now well discuss the formats and how they display custom fonts on different systems.
There are five different font formats currently used for font files. However, only four are needed to embed custom typefaces onto a website (.TTF, .EOT, .WOFF, and .SVG). So why are all these font formats necessary? The variety is necessary because not all formats will display on all browsers or systems. We need to cover our bases and use the full range of formats so custom fonts will appear on all browsers and user machines.
The first font format you’ll need to know about is .TTF, which is backed by Apple and supports TrueType fonts. .TTF is one of the most common desktop formats for fonts because it is compatible across platforms on the web and one reason is because of its TrueType format. A TrueType font makes it easy for the precise outlines of a typeface to be translated to the crude pixel structure of a browser screen. A TrueType font carries its own instructions for making the jump from vector outline to screen without having to go through any conversion. .TTF, which is supplemented by the .OTF format, is the de facto standard for web fonts today and is the first format you’ll use when embedding custom typefaces.
The .OTF format uses the same basic structure at a TrueType font (.TTF) but supports OpenType fonts. OpenType fonts are similar to TrueType fonts but have some extra features stored in additional tables within the font file. These fonts are developed jointly by Adobe and Microsoft, so they can be used by both Mac and Windows systems without any conversion.
Although the .OTF format is a standard for web fonts, it is not supported by Internet Explorer. So if you have an .OTF file, you’ll need to convert it to a .TTF file before you can convert that to an .EOT. We’ll discuss .EOT in more the next section. For this reason, .OTF is not one of the formats you’ll use when embedding fonts.
.EOT is a file extension that stands for ‘Embedding OpenType’ and is a standard used exclusively by Internet Explorer. When embedding non-standard typefaces, it’s important to take Internet Explorer and its many users into consideration so every user’s device displays the same fonts and every user has the same website experience.
The .EOT file format is necessary for embedding custom fonts so they will display on any IE version up to IE9. Even though all other browsers use the .TTF format, you’ll need to use convert it to .EOT to support earlier versions of IE.
.WOFF (Web Open Font Format) is a font file extension created specifically for web fonts. It works for almost all current browsers and is slowly being recognized as the official industry standard. The .WOFF format adds a significant amount of compression (sometimes up to 40%) to font files, making fonts load faster and making it better for the web than other formats. In the future, the .WOFF format will be supported by all browsers without the need for alternate file extensions to embed custom fonts. However, until it is universally recognized, you’ll still need to embed non-standard fonts with all four formats.
The final font format you’ll need to know about for embedding custom fonts is .SVG. .SVG stands for Scalable Vector Graphic and is simply a vector re-creation of the font. .SVGs are much lighter in file size, making them ideal for mobile use. This format is supported by the latest versions of Chrome, earlier versions of Safari, Opera and Safari for the iPhone.
| Browser | Compatible font format |
|---|---|
| IE | .eot (.woff support added in IE 9) |
| Firefox | .ttf, .otf (.woff support added in Firefox 3.6) |
| Chrome | .ttf, .svg (.woff support added in Chrome 5) |
| Safari | .ttf, .otf, .svg (.woff support added in Safari 5.1) |
| Opera | .ttf, .otf, .svg |
| iOS | .svg |
| Android | .svg |
So now that you’ve learned about the different web font formats, you may wonder how to acquire the different file types you’ll need to embed custom fonts. For each typeface you want to embed, you’ll need font files in the .TTF, .EOT, .WOFF, and .SVG formats. All for are necessary for fonts to display uniformly across users’ machines.
Some webfonts you purchase may come with all the formats necessary to embed the fonts into your site, but not every font will include all the formats. Although not every purchased font includes all the font file types you’ll need, there are plenty of online tools available to convert one font extension to another. Sites like Fontlab and FontSquirrel make it possible for designers to convert files. It’s important to note before converting file formats to check whether web use is allowed by the font foundry. Font licensing is one of the biggest hurdles when it comes to embedding fonts. You can check with the vendor of font foundry to make sure the purchased license agreement doesn’t have any limitations on how the font can be used.
If you’re having trouble with converting font formats or are not allowed to under the license one your machine, you can always purchase from services like Typoteque and Typekit. These are all helpful services for implementing custom fonts and only require a small piece of CSS code to embed fonts.
Now that we’ve talked a bit about font formats and why they are important, we’ll move on discuss how to these fonts in your site in order to display custom fonts.
There are two main ways to add custom fonts to your website. The first is to self-embed a font using the @font-face property and the second way is to use a web font service.
The first, @font-face, is a method that allows you to pull a font from your website directory and embed it within CSS. The @font-face method allows you to manage and host your own web fonts. Once you’ve download the desired typefaces, you can upload them along with the rest of your website files and then use the font-family property to manually add them to your CSS. We’ll discuss this method in greater detail in the following section on Self-Embedding Web Fonts.
The second method, using a web font service, allows you to embed non-standard fonts with just a small line of code in your CSS. Web font services do not allow you to download the typeface but will allow your web pages to display the desired fonts on all users’ machines as if you had hosted the font yourself. We’ll discuss this method in more detail later on in the Embedding with Font Services section.
In the previous section about Methods to embed fonts, we talked about the two ways in which custom fonts can be added to a site. This section will discuss the first method of embedding using the @font-face method.
However, in order to self-embed a font onto a site, you’ll need to purchase and own the custom fonts you want to use in order to self-host them. All custom fonts you self-host must have either been downloaded via an open-source font site or purchased from a vendor that offers web-use licensing. Depending on the licensing available, purchasing and self-hosting your fonts may actually be more cost-effective than embedding using a font service.
It’s important to note that if you’re not using an open-source font or a font purchased with a web-use license, you likely don’t have permission to do so. Embedding using @font-face is technically considered distribution of a font since users are accessing the font via your server. Traditional font licenses do not allow for distribution like this because it is akin to taking something, making copies, and giving it away for free. This is why web-use font licenses are needed to self-host fonts. So always double-check your font source and license before self-hosting and embedding custom fonts onto your site.
Another important consideration when self-hosting fonts is to consider your site’s performance and file size. With a number of typefaces and weights, fonts may total a few hundred kilobytes of space, which can slow down your site and the speed at which your custom fonts will be served. It’s important from both an aesthetic and technical standpoint to minimize the number of typefaces you include. It’s important aesthetically because a smaller number will cut down on visual chaos and it’s important technically because fewer typefaces will keep your file sizes down. In general, fonts tend to be about 20k to 40k in file size, although these sizes can vary wildly. So it’s always worth it to check the file sizes of your custom fonts and remember to keep the number at about 2–3 typefaces.
Once you have your custom fonts purchased or downloaded to your computer, they are available on a closed system and will be accessible for your design. In order to move fonts to an open system, which means they appear on other users’ machines, you’ll need to host them with the rest of your website files and embed them using the @font-face method.
Fortunately, self-embedding fonts is pretty simple. Once you’ve acquired the fonts you want to use, you must include the font files for each weight and style on the server with the rest of your website files. You’ll need all four font file formats (.TTF, EOT, .WOFF, .SVG) for every variant of the typeface. This way, your web fonts will be sure to appear on all users’ devices and browsers accessing your website.
Once you’ve collected all the desired fonts and necessary formats, you’ll call the custom font from the directory file by adding the @font-face rule and font-family property in the CSS page. You can do so in two parts like this:
First, put the following code at the top of your CSS document:
@font-face {
font-family: 'OpenSans':
src: url('fonts/OpenSans-webfont.eot');
src: url('fonts/OpenSans-webfont.eot') format('embedded-opentype'),
url('fonts/OpenSans-webfont.woff') format('woff'),
url('fonts/OpenSans-webfont.ttf') format('truetype'),
url('fonts/OpenSans-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
This bit of code links the font files in your directory and groups them into a font-family you can reference later on. It’s important to reference each of the four file formats in order to help users avoid unnecessary downloads.
Then, reference your embedded font anywhere you like using the font-family property:
body {
font-family: 'OpenSans';
}
This bit of example code applies the embedded OpenSans font to all text within the body tag. Once these two pieces of code are in your CSS, you can reference the font anywhere the font-family property is specified.
It’s important to take differences in web browsers and platforms into account when using the @font-face self-embed method. Although web browsers are tending toward uniformity and universal standards, they still differ in the types of tags and properties they support.
At the time of this writing, web fonts added with @font-face are viewable on over 90% of devices on the web and over 98% of tablets and mobile devices. However, even with the four font formats included, some browsers still do not support embedded custom fonts. Currently, most versions of Chrome, Safari, Firefox, Opera and Internet Explorer support one or more font formats to display embedded fonts. And both iOS and Android platforms support .SVG formats to display custom fonts.
Opera Mini seems to be the only browser without any kind of browser support for @font-face. However few, it’s important not to neglect these poor users when designing your site’s typography. This is when font stack come in handy. Even if fonts don’t fully display on some machines, font stack backups allow users to experience the site in the same way as users with @font-face capabilities.
Now that we’ve covered the @font-face method of embedding custom fonts, we can take a look at the second method: embedding fonts with font services. This section will discuss the different types of font services and some of the most popular choices for embedding non-standard fonts.
Web font services are a popular solution for adding custom typefaces and the possibilities for gorgeous typography open up immeasurably with the use of web font hosting. Font hosting services, whether they are open-source, paid, or subscription services, dramatically increase the number of fonts available to designers. The font selections of even the smallest font services can be pretty impressive, ranging from hundreds to thousands of custom fonts with catalogs full of high-quality fonts.
Another benefit of using a font service is bandwidth and service reliability. Major web font services will always allow your custom fonts to load because the fonts are being hosted through a number of remote locations. This also drastically reduces the load times on your server, making your fonts, along with your website, load more quickly.
There are a lot of great web font services out there. Depending on your needs and your budget, you should have no trouble finding a service to use and a perfect font for your web project. The following sections outline some of the most popular font services, from open-source to paid or subscription font services.
There are a number of popular web font services offering open-source fonts. Open-source sites allow you to search and download various styles, weights, and categories for free. One of the most popular open-source font services is Google Fonts, which allows users to download and self-host fonts or link to the files via Google’s platform. They provide a huge range to choose from and have a constantly growing list of custom fonts. Fonts can be selected then embedded into your website’s code with just a few lines of CSS or JavaScript. Since Google Fonts is free service, it’s easy to paste in the embed code and test lots of different fonts in your site. However, it’s important to remember to cut the number of typefaces to 2 or 3 so as not to slow down your site.
Another great option for embedding fonts is to use a subscription font site. If your project has an allotted budget, a subscription font site like Fonts.com or Adobe’s Typekit is a great option for embedding custom fonts. Subscription sites are a popular option as they provide easily searchable libraries of high-quality fonts. Rather than paying for individual fonts, these sites allow you to pay a subscription and then use any font available on the site.
Fonts.com offers searchable tags to help find the perfect fonts and a number of subscription packages so you can choose the best for the needs of your project. The site offers JavaScript and CSS embedding options and some self-hosting options for more premium subscription packages. Adobe Typekit offers a similar subscription model and offers thousands of high-quality fonts. Once you’ve selected the fonts you want to use, simply select the ‘Use fonts’ option, create a new kit for web and then embed the JavaScript and CSS code into your HTML code. In accordance with best practices, its generally recommended to embed with in case the user does not have JavaScript enabled so the CSS backup will still load the fonts on your site.
Although there is widespread browser support for custom fonts and the different methods in which they are embedded, there is always the risk of a display problem on a user’s browser. Because there is no way to ensure 100% success when embedding fonts, it is imperative to test, test, test your webpage design on all potential viewing devices and browsers, and platforms.
Double-check your fonts, hierarchy, and visual spacing are being displayed as intended across systems. It’s important to make note of any problems or differences in the typographic design and address them with proper backups as needed. Ensuring your fonts are properly embedded and that they have fallback font stacks in place is essential for a consistent visual design for all your users.