Webfonts and custom typography

Last Updated: Oct 05, 2016 10:01AM PDT

The past few years have brought many advances to the display and rendering of type on the web and anyone looking to add custom typefaces to their website will find themselves overwhelmed with choices as to how to go about this. This guide provides a brief rundown of some of the most common methods and how they integrate with your Cargo website.

Find out which foundry/font provider has the font you want to use. Many foundries have licensed their fonts to multiple services and providers, so if one service doesn’t have what you’re looking for, another may.

Integrate your new fonts into your site. Most webfont providers require signing up for an account and placing a small script that links to an external stylesheet or Javascript in your Custom HTML (requires a Site Upgrade). This enables you to reference your fonts in your Custom CSS.

Introduction

A popular way to add custom fonts is through the @font-face syntax which allows you to load a font file with a CSS declaration:

Given the rapid progress of @font-face development, numerous file formats for individual browsers have cropped up, making @font-face declarations complex or inefficient. Because of concerns with font piracy and cross-browser compatibility, a number of services have been started in the past few years which greatly simplify the process of adding fonts to your website.

Some of these services host the fonts for you; others require you to host the fonts on your own.

Hosted services:

have quicker installation and setup

make fixes and updates so you don't have to

use CDN hosting to ensure reliability and speed regardless of location

have at least minor protection against font piracy

Most hosted services offer plans on a per-font basis; Typekit and Fonts.com both allow access to an entire library of typefaces for a single fee.

potentially allow more control over character subsets and font features

are potentially faster, if you have a good host

require no external javascript or css

Note that embedding regular desktop fonts on the web through @font-face is usually illegal; a separate web license will likely be required.

An example using Typekit & Cargo

Sign up. (Trial accounts are free.)

Select the font you want to use and on the font detail page click on Add to Kit to choose it for your site and launch the Kit Editor.

The Kit Editor offers a number of options for how your font will be displayed on your website. Choose “Kit Settings” in the top right of the Kit Editor to point your Typekit account to your website’s URL. The “Selectors” option in the top left offers an easy way to assign a typeface to a specific selector (ie. .project_title, h1, etc). Clicking on “Advanced...” will show how to call fonts into your CSS using a conventional font stack.

Click "Publish" in the bottom right of the Kit Editor

Click "Embed Code" — this gives you the script tags that you can paste directly into your Cargo Custom HTML. It will look very similar to this:

Hosted service, offers hosted fonts in several languages, with several licenses available for each font.

Paid plans offer multiple language support for each font, which may be useful to anyone who is looking to provide content on their site in multiple languages. After choosing which fonts to embed into your website, it will generate a linked stylesheet that you can paste into your Custom HTML.

Several OpenType options can be set for these fonts; including the choice to select between old style/tabular/lining numerals, or small caps.

Typotheque has around 40 font families available, including individual familes for Arabic, Hindi, Armenian, and the International Phonetic Alphabet.

Hosted service which generates a linked CSS stylesheet which can be pasted into your Custom HTML.

The service is configured around the idea of "Type Drawers." Type families of various families are added to each drawer, and a monthly fee is charged based on the most expensive type family in the drawer.

WebInk has around 2200 individual fonts in its library. We were not able to test this service at this time, but will be revisiting it in the future.

Offers licenses for self-hosted fonts in EOT and WOFF formats. Each font is available with a one-time license, and can be added to a pre-existing Typekit account (much like FontShop Web FontFonts) for a hosted option with wider compatibility.

Webfont solution from Monotype that uses a "Projects" feature that works similarly to the way that Typekit's "Kits" do. Free and Standard plans are hosted, while the Professional plan can be self-hosted.

You can choose a selection of fonts to add to a project. After each set of fonts is chosen for a project, you can choose either a javascript or CSS-only method to add them into your website. Users of the free service are restricted to the javascript method, and must display a badge on their site. Depending on the method, this service will generate a linked stylesheet or script that can be pasted into your Custom HTML.

Fonts.com webfonts offers around 10,000 individual fonts for use, with including those with support for over 40 different languages.

Another solution from Monotype that can be hosted or self-hosted, depending on the plan. Font selections are chosen, combined, and linked to a specific domain, after which a linked stylesheet is generated which can then be added to your site.

Fonts Live's catalogue contains around 200 font families with multiple styles. It also has families that have Pan-European and Cyrillic language support.

Self-hosted solution; you must host the fonts on your own server space. Each font for sale is licensed individually.

The user can choose to license a font for @font-face use, for desktop use, or both. The actual license price is up to the foundry selling the font, so the terms will vary between fonts and foundries. Museo Sans 500, for example, is free, but requires a link back to the foundry in the CSS or on the site itself.

Since it's self-hosted, it will require some manual configuration, but each downloaded font is bundled with a CSS document as well as a link; all that is required of you is to make sure it points to the proper directory on your webspace. After that, you can refer to each font by name in your CSS using a standard @font-face declaration.

Free, hosted service; you can add Google web fonts into your site simply by going to the website, choosing the fonts you're looking for, and copying the generated stylesheet link into your Custom HTML.