Everything you Need to Know About Web Fonts
Editor’s note: This guest post was written by Abbey Fitzgerald a UX software engineer and web designer who loves the art of crafting code.
Typography is a fundamental element in any web design work that you do. The reason we are hired to design websites for our clients is so they can provide an experience that provides helpful content for their users. Having a solid typographic base will help display content in a way that users can consume effectively. While there may be many other design elements on a website, content is the main consideration, and as designers, it is our job to enhance projects with our selection and use of typography.
Typography Basics
Font vs. Typeface
Before we get too far into the typography discussion, let’s go over the terms “font” and “typeface.” A typeface refers to the set of typographical symbols and characters: letters, numbers, and any characters that let us put words on our website. It is the design of the alphabet, basically the shape of the letters that make up that style. When we refer to Helvetica, we are referring to a typeface.
A font is defined as the complete character set within the typeface, often referring to a particular size and style. Helvetica Bold 10 point is a way to reference a font. Fonts are specific to the files that contain all the characters and glyphs within the typeface.
This great debate, “font vs. typeface,” makes for wonderful conversation with fellow designers. For all you type sticklers out there, we’re really talking about typefaces, but “web fonts” is most used in conversation.
Font Classification
As you come across the many available typefaces in the world, you will need to be familiar with how they are classified. The most common way is to have them classified by technical style: serif, sans-serif, script, display, etc. Typefaces are also classified by other specifics such as proportional or monospaced. Depending on the source, they may get very specific.
History of Web-Safe Typography
In the early days of the web, we were stuck with web safe options, which were very limiting. For a user to see the font that was intended by the designer, it was necessary that they had that available on their computer.
If you open up a stylesheet from an older site you will likely find Arial, Georgia, Times New Roman, Trebuchet MS, and/or Verdana. Those were the fonts that were most likely on a user’s machine, so they were considered to be “web-safe” since the majority of users could view the website as intended.
If you’ve been designing websites for a while, or are a long time web surfer, you probably remember the days of limited typography options. It wasn’t that long ago that we saw the same five typefaces over and over as we surfed the web.
Things began to look boring with no other web safe options, and one could argue that these typefaces weren’t the best fit for the web (after all, they did originate from print). But as the web evolved, more type options became available.
What are Web Fonts?
Because typography is so important, it is time to celebrate that huge strides have been made. We have so many typefaces at our disposal that we can now choose what is best for our users, rather than having to rely on the same old web-safe fonts that we were once limited to.
Web fonts are not pre-installed on the user’s system like web-safe fonts are. We do not have to rely on the user having the desired font on their machine. They come from an included source so every user will be able to see the defined font. These fonts are downloaded by the browser while rendering the web page, and then applied to the text.
How to Use Web Fonts
The @font-face rule
This widely supported rule allows us to download fonts from a server, or host them, so we can use them on our web pages. By declaring the @font-face rule in our stylesheet, we can specify the name of the typeface, the location, and the font weight.
This example shows how we add Open Sans Regular. You will see the source is a fonts folder that is included in the website project.
[css]
@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-weight: normal;
font-style: normal;
}
[/css]
The declaration above adds the font so it can be used. How do we actually get it to display?
[css]
.example{
font-family: "Open Sans Regular", Arial, sans-serif;
}
[/css]
You can see that the name of the font is set to “Open Sans Regular.” This is the font name that would then be referenced in our CSS font stack, along with fallback fonts just in case the font doesn’t load for some reason. In most cases, the font will load just fine, but it’s a good idea to include fallbacks, just in case.
Keep in mind that most fonts have other families, some have more than others. To utilize those, make sure you include each one with the @font-face rule.
Formats and Web Fonts
Let’s dive a little deeper into web fonts, when there are multiple formats that you will need. These fonts are self-hosted, and are stored on the server in a folder called “fonts.” You’ll notice that there are a few new lines added from the last example.
[css]
@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}
[/css]
There is a reason why we have to include different formats like: .eot, .woff, .ttf, .truetype, and SVG. Different browsers support different font formats, so we need to cover our bases and provide everything that various browsers may need.
Here’s a list of browsers and what font file types they support:
- Internet Explorer – .eot
- Mozilla Firefox – .otf and .ttf
- Safari and Opera – .otf, .ttf and .svg
- Chrome – .ttf and .svg
- Mobile Safari – .svg
Font Hosting
When using web fonts, the stylesheet needs the font itself so it can be rendered in your design. For this reason, you will need the font files to be hosted somewhere. There are two options for where to house your fonts. You could use a service that hosts fonts for you or you could self-host with the actual font files. It really depends on the project, each with their own advantage.
Depending on which approach you take, whether that is self hosted or hosting with a font service like Typekit, the CSS will look different. Like the name, kits are created with Typekit. These contain all of the fonts you will use. To reference these files, you will add a Javascript snippet to the head of your HTML document. This lets you load the correct @font-face rules.
Hosting Service Providers
There are too many hosting service providers to mention but TypeKit, Fonts.com, H&Co (Hoefler and Company) are a few options. Basically, they have the fonts on their server, and you are free to use them based on the kind of account you have.
Some advantages to this approach are:
- Generally these providers have a wider selection of high-quality fonts since they are in the typography business.
- Fonts are easy to use/install.
- It’s easy to change the typefaces during the design process or to make a global change.
- Because they are third party files, they easily be cached by users.
- Fewer HTTP requests results in improved performance
It’s pretty easy to add the new fonts into your site. For example, Fonts.com provides three different publishing options with premium plan memberships. There are both javascript (with Typekit also) and non-javascript options that link to a served stylesheet and also a self-hosted option. Depending on what you choose, your CSS will look different.
Usage considerations
With hosted fonts, less can be more. It’s important not to use too many or there could be performance issues. Multiple weights of the same font are considered to be an additional set, so essentially you are loading another font. It’s good practice to only include what you need.
Self-hosting
It’s pretty easy to self-host web fonts. All you have to do is include the font file on your web server, and it will be automatically downloaded when a user arrives on your site.
Some benefits to self-hosting are:
- No javascript dependency for font delivery, all you need are CSS references.
- Fast font rendering.
- No dependency on font hosting provider’s uptime.
- With free and purchased fonts, there would not be subscription fees or page view limitations.
Usage considerations
It’s important to make sure you have all the needed formats. If a format is not included, it would go to the next fallback font. Making sure you have the correct path to the font for the source is important. Like we saw in a previous example, the source would look something like this:
[code] src: url("../fonts/OpenSans-Regular-webfont.eot"); [/code]
Where to Find Good Web Fonts
There are so many web fonts to choose from; we are very fortunate to have all these options. Finding the perfect font is easier than it has ever been.
Here are some great sources for web fonts:
Create your own web font
By some chance, if you cannot find the perfect font, you can always create your own. Font Squirrel provides you with a web font generator that will convert any font into a kit of web files for embedding. Just keep in mind that you will have to host these. To learn more, take a look at the Font Squirrel web font generator. Just a heads up, when creating your own font, it is important that you have the rights to use that font.
Web fonts are a great way to add the perfect font to your next web project. With a wide variety of typeface options and plenty of great sources, you are no longer stuck with the traditional web-safe options. Easy to use, and fun to experiment with, web fonts are a great way to add personality to your website projects.
Another great addition to any web project is a high-quality hosting partner. For some of the best WordPress hosting available, check out WP Engine’s hosting plans!
