Using Web Fonts in Frontend

I recently picked up a web project and, after getting the mockups from the designer, spent a few days planning and tuning the styles. The design uses custom fonts instead of the system defaults—lato-regular and lato-bold—so I needed to set up the font imports. It’s not complicated, but I’d never organized my thoughts on it, so I dug into some references and pulled together what follows.

Web Font Basics

The font-family Property

When we control fonts on a webpage, we usually use font-family or the shorthand font property. CSS describes font-family like this:

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

In other words, the browser will try the fonts we specify in that order for the target element.

How Font Selection Works

Once we declare the fonts, the browser asks the operating system for them. If the OS doesn’t have the first font installed, the browser moves on to the next one in the list. If none of the listed fonts exist locally, the browser falls back to its default font.

So, to keep the appearance consistent, always end the list with a few fonts that you know are widely available on every system.

.a {
    font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

This is how Medium defines the font stack for the a element. The first several entries are custom or platform-specific fonts, and the final sans-serif is the universal fallback.

The Frontend Stack & Where Web Fonts Sit

When I first started building frontends, people constantly repeated the “three pillars” mantra: HTML, CSS, and JavaScript.

So where do web fonts live? In CSS. Obvious, maybe, but keep it in mind.

Importing Custom Fonts

Import Methods

The three frontend pillars give us three load approaches.

1. @import

   We use Less as our CSS preprocessor, and this is how we import custom fonts within it:

   

   Notes

   • The URL can be relative or absolute. Cross-origin addresses need the right access control.
   • @font-face is a CSS3 feature, and browsers support different font file types. Internet Explorer 9, Firefox, Opera, Chrome, and Safari all support the @font-face rule. IE9 only understands .eot; Firefox, Chrome, Safari, and Opera support .ttf and .otf.

   Remember: Internet Explorer 8 and older versions do not support @font-face.

2. Standard <link>

document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Condiment">';

Remember that once the browser adds those CSS or JS resources, it will immediately load and execute them.

Icon Fonts

That’s pretty much everything about font configuration. Let’s branch out to icon fonts, which are widely used now. Icons started as raster images, but today icon fonts and SVGs are usually better options.

Here’s how icon fonts work:

1. Design the icons in SVG format.
2. Convert the icons into a font file.
3. Use semantic CSS classes and pseudo-element content to map Unicode glyphs to each icon.

Because we’re dealing with vector graphics, there’s no quality loss, and we don’t have to micromanage image assets like we used to.

The downside is obvious, though: icon fonts are either monochrome or gradient only, so keep that in mind.

Recommended Icon Font Options

Font Awesome and Iconfont are the two services I rely on most when I need a third-party icon set.

Each has pros and cons. Font Awesome provides an entire collection with consistent styling, but that also means less flexibility and a relatively large payload. Iconfont works like Taobao: add what you like to your “shopping cart” and export the bundle. Which one should you choose? Let your project requirements decide.

Final Thoughts

Years ago, I was blown away by the visual polish of Apple’s website and puzzled by why their typography looked better than other sites. Once I became a web developer, I realized they were loading a custom font—PingFang. Time flies; customized fonts are commonplace today. They do add weight to your frontend assets, but you can mitigate the latency through CDN, gzip, HTTP/2, and other optimizations. User experience should always move forward, not backward, so frontend work is ultimately about presenting better services and experiences.

Further Reading

• Use Google Fonts to Bring Better Type to Your Site
• PingFang Typeface
• How Icon Fonts Are Made and Used