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.
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.
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.
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.
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 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.
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>
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
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, Hairline200 Extra Light300 Light400 Normal, Book500 Medium600 Semibold, Demibold700 Bold800 Heavy, Extra Bold900 BlackSo, 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.
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>
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.
Edge Web Fonts is powered by Typekit, a commercial font service from Adobe. That means it uses Typekit’s web 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.
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.
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.
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.