Help

Edge Web Fonts is a free service that provides access to a large library of fonts for your website. It’s one of the Edge Tools & Services from Adobe. Use of the service is free and unlimited – see the terms for details. Use and distribution of the fonts is according to the licenses linked to from the details provided for each font in the library.

To use Edge Web Fonts in a web page, just choose some fonts, review their Subset and Style settings, add a JavaScript tag to the <head> of your page, and include font-family declarations in your stylesheet. Read on for details.

Choosing Fonts

Choose fonts by browsing the library, filtering your view by classification, recommended use, typographic properties, and language support. To use a font, click “+ Select this font” to add it to the “Use Selected Fonts in your Website” panel at the bottom of the page.

Classification

  • Sans serif: without serifs
  • Serif: with serifs
  • Slab serif: thick, block-like serifs
  • Script: flowing or calligraphic
  • Blackletter: gothic script, “Old English”
  • Monospaced: fixed-width
  • Hand: handwritten or handmade
  • Decorative: swashes, distressed, irregular
  • Paragraph: recommended for continuous text at small sizes, these fonts possess a generous x-height and are manually hinted to perform well across operating systems. Learn more about hinting.
  • Headings: recommended for short text at medium to large sizes, these fonts are generally more decorative and often served with PostScript outlines for improved rendering. Learn more about PostScript outlines.

Properties

  • Weight: thickness of the strokes
  • Width: width of the letterforms
  • x-height: ratio of lowercase height to height of capitals
  • Contrast: ratio of thin strokes to thick strokes
  • Standard: upper and lowercase letters, as in “Type”
  • All caps: all capitals or small capitals, as in “TYPE”
  • Lower: lowercase numbers with a variable baseline
  • Upper: uppercase numbers with an even baseline

Language Support

Many fonts available through Edge Web Fonts include support for multiple languages. To find fonts for your languages, select the languages you need support for in the sidebar. You can filter by multiple languages at a time; e.g., if you need fonts that support English and Spanish, select both languages to only see fonts that include characters for both languages.

You can see the letter characters included in each supported language in Typekit's language support tables, which Edge Web Fonts shares:

While browsing fonts, you can also check to see if a font has support for a specific character by clicking into its text sample to edit it to include that character.

Once you've selected the fonts you want, check their Subset settings in the "Use Selected Fonts in your Website" panel to make sure you are using the right set. The "Default subset" setting includes support for English, Spanish, Italian, and Portuguese. To support other languages, you must choose the "All characters" setting.

Subsets and Styles

After choosing fonts, specify their Subset and Style settings in the "Use Selected Fonts in your Website" panel. These settings allow you to minimize the file size of the fonts based on the requirements of your content, improving your website's performance.

Subsets

The Subset setting controls the size of each font by including only some of the available glyphs. You should use the smallest subset that includes all of the glyphs required to display your content. There are currently two options.

  • The "Default subset" contains the Latin-1 character set plus useful typographic marks.
  • The "All characters" subset contains every glyph that’s available in the original font. Note that each font has a different overall character set, and not all fonts will contain the glyphs required for a particular language or piece of content. See also language support.

Styles

The Styles setting determines which of a font family’s weights and styles will be included. You should include only the weights and styles required to display your content. For example, if you'll be using a given font only for headlines, you might choose “Custom styles” and then check only the "Bold" style.

  • The “Default styles” option will include the weights and styles from the “basic four” set: regular, italic, bold, and bold italic. If a family contains none of the basic four, no fonts will be loaded for that family.
  • The “Custom styles” option allows you to choose which specific weights and styles to include from a family.

The JavaScript Tag

After choosing fonts and reviewing their settings, just paste the JavaScript tag from the “Use Selected Fonts in your Website” panel into the <head> of your web page.

The JavaScript tag looks like this.

<script src="http://use.edgefonts.net/source-sans-pro.js"></script>

And it looks like this when used in a web page.

<!doctype html>
<html>
<head>
  <script src="http://use.edgefonts.net/source-sans-pro.js"></script>
  <style>
    h1 {
      font-family: source-sans-pro, sans-serif;
      font-style: normal;
      font-weight: 400;
    }
  </style>
</head>
<body>
  <h1>Hello World in Source Sans Pro</h1>
</body>
</html>

Protocol

Edge Web Fonts are served over both HTTP and HTTPS protocols. We recommend that you request fonts using the “protocol-less” form. Doing so ensures that the HTTPS version is automatically included in secure pages, while avoiding SSL overhead for pages that don’t need it.

If you are developing web pages locally, without a web server, we recommend that you use the HTTP URL. If the address in your browser begins with file:// then you should add http: to the beginning of each sample URL provided by this document.

# Protocol-less URL (recommended for most cases).
//use.edgefonts.net/averia-libre.js

# HTTP URL (recommended for local file-based development).
http://use.edgefonts.net/averia-libre.js

# HTTPS URL (recommended if your site is 100% secure pages).
https://use.edgefonts.net/averia-libre.js

Using Fonts in CSS

Once you’ve included the JavaScript tag in your page, use the font-family declarations provided in the "Use Selected Fonts in your Website" panel to write CSS that applies those fonts to your markup. Each declaration includes a recommended fallback font. For example:

font-family: source-sans-pro, sans-serif;

Combine this with the font-weight and font-style values of the weights and styles you included with the Styles setting. Here’s a list of common font name to numeric weight mappings.

  • 100 Thin, Hairline
  • 200 Extra Light
  • 300 Light
  • 400 Normal, Book
  • 500 Medium
  • 600 Semibold, Demibold
  • 700 Bold
  • 800 Heavy, Extra Bold
  • 900 Black

So, if you included Source Sans Pro Light (300) and Black (900), you can write the following CSS to use Source Sans Pro in the 900 weight for headlines and the 300 weight for body copy.

h1 {
  font-family: source-sans-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
}
p {
  font-family: source-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
}

It’s recommended to always specify both the font-weight and font-style properties each time you use a font.

Controlling the Flash of Unstyled Text (or FOUT)

Fonts are loaded as assets into a web page—just like images or video. Depending on your browser or your connection speed, they can load quickly or lag behind the rest of the page. Different browsers handle font loading differently; for example, Safari and Chrome will refrain from displaying text set in a web font until the font has loaded, while Internet Explorer won’t show anything on the page until the font loads. Meanwhile, Firefox will display the site with the fallback fonts in the font stack, and then switch to the linked fonts after they’ve finished loading. This results in a flash of unstyled text, or FOUT.

Edge Web Fonts gives you control over how the page is styled while fonts are loading via Typekit-based Font Events, which in turn can help you control the FOUT. When fonts are loading, a class of .wf-loading is applied to the HTML element. Once the fonts have loaded, that class changes to .wf-active. So, you could add the following to your stylesheets:

.wf-loading h1 {
  /* styles to use before Edge Web Fonts are loaded */
}
.wf-active h1 {
  /* styles to use after Edge Web Fonts are loaded */
}

You can then adjust your styles to make the FOUT less jarring; e.g., by making sure the flashed font and the loaded Typekit font look to be the same size. Or, you could hide your text until the font is completely loaded. For example:

<style>
  .wf-loading h1 {
    font-family: source-sans-pro, sans-serif;
    visibility: hidden;
  }
  .wf-active h1 {
    visibility: visible;
  }
</style>

<body>
  <h1>This headline will be hidden until Source Sans Pro is completely loaded.</h1>
</body>

About

Edge Web Fonts is a free hosted web font service from Adobe that provides access to a large library of web fonts made possible by Google, Adobe, and designers around the world.

Adobe Typekit and Edge Web Fonts

Edge Web Fonts is powered by Typekit, a commercial web font service from Adobe. That means it uses Typekit’s font serving platform and JavaScript libraries for browser compatibility and font events, and it makes use of the same global font serving network for speed and stability.

Plus, it's easy to switch to Typekit if you want access to Typekit's library of commercial web fonts or the additional font evaluation tools, customer support, and uptime guarantee available with a Typekit subscription. While browsing the Edge Web Fonts library, you'll notice links to similar fonts at Typekit. Following these links will take you to a page at Typekit containing commercial Typekit fonts that share characteristics of the fonts you're browsing at Edge Web Fonts. From there, you can sign up for Typekit to use those fonts. Also note that some of the fonts available through Edge Web Fonts are also part of the Typekit library. This means you could choose to use those fonts via Typekit instead if you want the additional features and services Typekit provides. These fonts include an "Also available at Typekit" link that will lead you to Typekit for more details on how to use them via Typekit.

Google Web Fonts and Edge Web Fonts

We’ve partnered with Google to make many of the open source fonts originally commissioned by the Google Web Fonts project available through Edge Web Fonts. At the same time, Adobe has contributed two open source fonts of its own — Source Sans Pro and Source Code Pro — to both the Edge Web Fonts and Google Web Fonts services.

In addition, Adobe is applying its considerable font expertise to improving and optimizing a number of the open source fonts that are available in both Google Web Fonts and Edge Web Fonts. Efforts include hinting some fonts for better rendering at smaller sizes, plus a number of other optimizations. All of these contributions will themselves remain open source. The first improvements will be released soon. Watch the Edge Web Fonts Blog for updates.

Browser and OS Support

Because Edge Web Fonts is powered by Typekit, the browser and OS support of its fonts matches that of Typekit.

This Edge Web Fonts website is designed to work optimally in the latest versions of Chrome, Safari, Firefox, and Internet Explorer. You may have trouble using certain features in earlier browser versions.

Terms

Use of this service is bound by the Terms of Use.

Use and distribution of the fonts is according to the licenses linked to from the details provided for each font in the library and referenced in the CSS file served for each font.

Edge Web Fonts is a part of Adobe Edge Tools & Services

New tools and services for a beautiful, modern web. Learn more.