Skip to content

<blog>
Webfont Licensing

Chris Mauck

February 5, 2020 • 5+ minute read

Webfonts have become the standard for maintaing branding on the web. In the past, the only way web designers could be sure that text would display in the fonts the original designers intended was to design around the limited selection of fonts that are shared by Mac and PC operating systems. That small list was known as "web-safe" fonts. If you wanted to venture beyond web-safe fonts, you could create titles that are image based. But this method comes with performance, administration overhead, SEO and cost implications.

Most of the webfont services available today are subscription-based. They often offer different tiers of service to satisfy different budgets and needs. For designers and clients alike, the benefit of web fonts means greatly expanded creative and typographic freedom, plus text that is searchable, editable, and faster loading than images. Highlights from one of my previous posts:

Benefits of Web Fonts

  • Accessibility: Text remains readable to assistive technologies for people with visual impairment
  • Visual: Fonts are optimized for screen display providing crisper cleaner display for more engaging experiences on a wide variety of devices.
  • Branding: Fonts can be used as a subtle design element or a powerful branding tool to enhance the design and reinforce the brand.
  • Flexibility: Copy changes and regular text edits are faster and more cost effective.
  • SEO: Search engine crawlers can read and use to all content of the site, which increases SEO effectiveness.

Basic font usage

Defining fonts on a website is a trivial task. Simply denote the element or selector, add the font-family property and define the fonts which should be used with the selector.

p {
    font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Webfont usage

Webfonts can be incoporated into your website in various ways. Most licensed services require the use of a code snippet which seamlessly includes @font-face declarations behind the scenes. @font-face declarations make the custom fonts available to the browser in as simple a fashion as web-safe fonts as shown above.

Example inclusion of a Google font:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">

And referencing the font within your CSS:

body {
  font-family: "Montserrat", Arial, Helvetica, Sans-serif;
}

Licensing

Let's dig a little more into the licensing and some of the different font foundries.

What is a font license?

A font license is an agreement that gives you permission to use a font, subject to the terms of that agreement (also called an End User License Agreement or "EULA") like any other type of software or creative package available for personal or public use.

Font License Types

There are various types of font licenses and some, like webfonts, have even more licensing options depending on the need.

  • Desktop licenses: allow you to install a font on a computer for use with design tools
  • Webfont licenses: allow you to embed the font into a website or email. Unlike desktop licenses used for design, webfont licenses are used for the finished product
  • Embedded licenses: let you distribute fonts in a physical product like a medical device, cars, or in a software program
  • Mobile app licenses: allow fonts to be embedded in phone/tablet apps
  • ePub licenses: cover usage in commercial publications
  • Server licenses: enable web or cloud-based services and SaaS use cases

Webfont Licenses

These can be one-off, monthly, or annual charges—often based on the amount of monthly traffic you get. Include variations of pay-as-you-go, perpetual and web service subscriptions.

Pay-as-you-go

Install/host the webfonts on the website/server (self-hosting) and prepay for a certain amount of pageviews. A counter is included in the code that notifies the distributor how many times the font has been served. Prices and limits on domain names vary between font foundries.

  • Convenient for low traffic or new websites without reliable traffic projections
  • Can become expensive as traffic increases over time.

Perpetual licenses

Install/host the webfonts on the website/server and make a one-time payment based on the average monthly pageviews expected for the site. Prices and limits on domain names vary between font foundries.

  • Limit your investment by expecting consistent traffic for an extended period of time.
  • Can be significantly cheaper than the pay-as-you-go model.

Web service subscription

Subscription basis for serving the web fonts to a website instead of self-hosting them. There are usually license limitations in respect to domain names and amount of pageviews. Prices and limits on domain names vary between font foundries.

  • User has quick access to a large library of different fonts and can switch between them without additional cost.
  • Convenient for websites with a short life-span, where many font styles are required.

Given that there is no definitive standard regarding webfont licensing, the exact conditions vary from foundry to foundry and distributor to distributor. A certain amount of pageviews (PV) in the pay-as-you-go model means exactly that, whereas in the perpetual model pageviews are considered per month for as long as the website is live.

Webfont Access

Cloud font licensing

There are a number of services that provide access to many typefaces for a monthly fee. These can usually be used both online and offline for print. Typekit is a good example of this.

Open-source license

Open source usually refers to ‘free to use’. Google fonts is a good example of this. But, be cautious: like anything, things that are free are sometimes lower quality and most certainly overused, so may not be suitable for representing your brand.

Best Practices

Creative teams design based on the needs of a project and a brand. When it comes to fonts, the Creative team ensures that what they design matches the branding of the client and benegits the project visually. During their creative process, the Creative team is the first team that should consider the impact of the fonts in use and how they can or should be incorporated into a digital project.

Desktop font licenses

The use of custom fonts within a design project often requires a desktop font license. A desktop font license is not the same as a webfont license.

A desktop font license allows the Creative team the right/ability to utilize a font within a desktop design project that is intended for static display. Whether it be in a print piece or text within in an image of a digital piece, the font is used in the creation of the static asset.

Can the same font be used on the web?

Short answer: no. But actually, it depends on the license. More often than not, a desktop license is only that. Webfonts are typically developed specifically for use on the web. Limited glyphs to benefit load times, sharper appearance, etc. As such, webfonts require their own license as described above. Some of the common font foundries are listed below.

When to license?

It's best to plan ahead for your font needs. During the design phase, the art director should request the purchase of the web font license or otherwise make sure that the Project Manager or Digital Producer is aware of the need, timting and any other expectations (e.g. - font weights, glyph requirements, etc).

Who should license?

Depending on your organization, this could be a procurement agent or someone in your Art Buying team. While this is a digital license, it doesn't mean that digital memebers, like your IT team, should be involved. Instead, check with the Project Manager or the Development team lead for guidance. Webfont licenses are neither cumbersome or time intensive. They are rather quick to enable and you should be able to begin using them almost immediately.

Most font foundries that require a license, also require that you specify authorized domains where the font may be displayed. When including URLs of authorized domains, there may be a propogation period wherein the font is not readily available. Please check appropriate rules and restrictions with some of the font foundries listed below.

Font Foundries

Common font foundries that have been used over the years.

Tagged

Recent Posts

Other Posts