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.


Included in this article:

Typekit, Webtype, Fontdeck, Typotheque, JAF, WebInk, Process Type, Myfonts, Fonts.com, FontShop, Fonts Live, Fontspring, Font Squirrel, Google, Kernest

Summary — how to integrate a webfont on Cargo:

1. 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.
2. 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 Cargo Upgraded Membership). 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:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
(source)

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 (info on hosting files outside of Cargo).

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.

Though a service may offer "Webfonts," it doesn't necessarily mean that they are optimized for web use. To learn more about this see Stephen Coles' article "The Webfont Revolution Is Over, Let the Evolution Begin" on Typographica.


Self-hosted services:

• allow more control over loading
• 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 using regular desktop fonts on the web is usually not legal; a separate web license will likely be required.

An example using Typekit & Cargo

1. Sign up. (Trial accounts are free.)
2. 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.
3. 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.
4. Click "Publish" in the bottom right of the Kit Editor
5. 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:
   
   <script type="text/javascript" src="http://use.typekit.com/abc123.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   
6. Then place it into your Cargo Custom CSS (get the codes by clicking "Advanced..." below the "Selectors" menu in the Kit Editor)
   
   .project_title {
font-family: "facitweb-1","facitweb-2", arial, san-serif;
font-size: 24px;
}

   Additionally, any selector you add into your Kit using the "Selectors" option will automatically be styled in that font.
   
   You can now also use it directly in your Project Content or Custom HTML:
   
   <div style="font-family:'facitweb-1','facitweb-2', arial, san-serif;">Here is some text set in Facit</div>
   Note: Typekit separates its fonts into two parts; most other services will only require one font name in the CSS stack.

---

Overview of popular webfont providers

Typekit

Hosted solution, requires a script tag to be placed in your Custom HTML.

After the script is pasted properly, you can use Typekit's "Kit Editor" to view your fonts, or see how they can be used in your website. See the example above for a brief example of their use.

Typekit offers around 600 font families, many with multiple weights and styles. Users of the Free service must display a typekit badge on their site in order for their fonts to display.

Webtype

Hosted solution which generates a linked stylesheet that can then be pasted into your Custom HTML.

Webtype offers around 120 font families, each with multiple weights and styles.

Fontdeck

Hosted service, generates a linked stylesheet to serve its fonts to users' websites.

Unlike other services, it counts www and non-www domains separately, so in Fontdeck's font settings you'll have to give it permission to serve fonts to both www.yoursite.com as well as yoursite.com. This will result in two linked stylesheets, both of which will have to be pasted into your site's Custom HTML.

Fontdeck offers around 740 font families, most with multiple styles. This includes 20 non-Latin fonts for Arabic, Armenian, Cyrillic, Greek, and Hebrew.

Typotheque

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.

Just Another Foundry (JAF)

Offers a hosted service for its own selection of fonts. Each font is paid for separately on a year-to-year basis.

After activating the font for your domain, a linked stylesheet is generated that you can put into your Custom HTML.

Just Another Foundry offers 6 font families, each with a web-specific variation available for purchase.

WebInk

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.

Process Type Foundry

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.

Process Type offers 16 fonts families for use, each with multiple weights and styles.

Myfonts Webfonts

Self-hosted service that uses javascript in addition to CSS to serve its fonts.

Each font has its own license which may vary from foundry to foundry. Licenses for a font's web/desktop use are separate but can be bought together for a discount.

There is a one-time fee associated with a web license; however, if usage increases above a certain threshold, the fee increases.

Myfonts offers around 10,000 individual fonts that can be licensed for use on the web.

Fonts.com Web Fonts

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.

Web FontFonts (also at FontFont)

Self-hosted solution, much like the Fontspring. Web Fontfonts are bought and downloaded like conventional FontShop fonts, but they are formatted exclusively for web use.

By default, they do not support Safari (which at the time of this writing does not support the WOFF format); however, browser support can be extended through FontShop's partnership with Typekit.

It is also worth noting that a selection of popular FontShop's fonts are already available for use through Typekit, without having to buy them separately from FontShop.

FontShop offers around 125 font families, each with multiple styles.

Fonts Live

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.

Fontspring

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.

Font Squirrel

Free self-hosted font service hosted and curated by Fontspring, where many free fonts are available for download. Each font is ready for use in any number of applications; web or desktop.

Much like Fontspring, it requires some manual configuration to make it work for your website, but comes with documentation that will assist you in the process.

If you're a type designer looking to use your own typeface on the web, Font Squirrel also has tools to automate the creation of a properly formatted web font and stylesheet, ready to be uploaded and used on your site.

Google Web Fonts

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.

It currently has around 110 font families available.

Kernest

A hosted service that serves fonts through a linked stylesheet, which can then be pasted into your Custom HTML. Some fonts are available for free; most offer a one-time license on a per-site basis.

Kernest offers around 1500 individual fonts.

---

Links to additional information

• Typographica on Twitter for anything related to type and the internet
• Web font services — An Overview by Sylvia Egger
• Typekit's Blog
• The Webfont Revolution Is Over, Let the Evolution Begin by Stephen Coles
• The State of Webfont Quality by Ross Mills
  
• Web Fonts at the Crossing by Richard Fink
• Cure for the Common Webfont (parts 1 and 2) by Stephen Coles
• Webfonts.info a website dedicated to webfonts & @font-face embedding
• Further Hardening of the Bulletproof Syntax by Fontspring, for those writing their own @font-face declarations.
• An overview from Webfonts.info of which browsers support @font-face.

And lastly, special thanks Stephen Coles for his feedback on this article.