Webfonts Quick Start Guide

This quick start guide is meant to suit a majority of websites, but there’s plenty in here you could alter based on the priorities of your site. It assumes you’re familiar with the basic process of building a website and things like paths, CSS, HTML and FTP. Ok, caveats out of the way... let’s set up some webfonts!

Show:

Step-by-Step Instructions

1) Upload the webfonts folder to your server

Upload the webfonts folder to your server’s root directory. The root directory is usually the first directory that is open when you log into your server but not always. Sometimes it’s a folder called public_html or www.

2) <link> to font-styles.css

The next step is to <link> to font-styles.css. Copy and paste the <link> below into any HTML page on your site that will use the fonts. It goes between the <head> tags.

<link href="webfonts/font-styles.css" rel="stylesheet" type="text/css">

3) Style some text or edit your CSS

Now, set some text in your webfont. Find pre-written classes in webfonts/font-styles.css or jump to the code-only section and find them there. Either choose a class to apply or use them as the basis for your own styles.

Here’s an example of applying a class to text on your page.

<p class="Stratum1WebThin">
  Set this text in Stratum 1 Web Thin!
</p>

You could also set any text in the <body> to the fonts of your choosing by adding a new block to your CSS. The sample below changes any text in the <body> to Stratum 1 Web Thin:

body {
	font-family: 'Stratum2Web';
	font-weight: 200;
	font-style: normal;
	}

This same technique can also be applied to any HTML tag like <p>, <div> or <h1>.

A note about weight designations.

In font packages with multiple weights, the different weights are designated by number. For example, instead of seeing font-weight: bold;, you’ll see font-weight: 400;. Use the class names of the styles provided in this guide to help differentiate between weights in larger families.

4) Test and Troubleshoot

Now that you’ve uploaded the webfonts folder, added the <link> and styled some text, the webfonts should show up on your web page. If they don’t, give the following a try to help narrow down the problem:

a) Check the basics

b) Dig deeper

When you think you’ve got the basics down but the fonts still aren’t loading, it’s time to narrow down the source of the issue. If you uploaded the webfonts folder in its entirety to your server’s root, then you’re all set for this test. If not, do that now – drop the entire webfonts folder on your server. This test only works if you haven’t made modifications to its contents.

Now, put its URL (below) in your browser’s address bar and hit enter. Make sure to replace everything in red with your own domain name.

http://yourdomain.com/webfonts/

With a correct address, a sample specimen page will load and show your purchased webfont(s) in any browser that supports @font-face and our font formats. If the fonts fail to load, you’ll see Comic Sans or a web-safe serif font. We promise that’s not a type design joke – it makes recognizing that the fonts failed to load an easier task.

If you see your purchased webfonts, it tells you that most likely, the basics are still off – paths, syntax, missing webfonts, etc. – but that once those are righted, the fonts will load. If the webfonts didn’t load, it means you'll probably have to look beyond the basics to find your issue since the folder contains working code. If you’ve scoured your code and checked that the webfonts were uploaded to your server, then it’s probably time to expand your troubleshooting to variables specific to your server or site set up. A few examples are things like mime types, mod_rewrites, and cross-origin resource sharing. Try using your browser’s built-in development tools to locate the problem and search, search, search.

Good to know

  • Our webfont license doesn’t allow serving TTFs and SVGs.
  • It is ok, and even desirable, to leave the index.html file in the webfonts folder. This makes the font files less open to indexing and download though search engines.
  • Our webfont packages include the legacy webfont format EOT, but our sample code only uses WOFF and WOFF2 files. Most sites are well-served by the WOFF duo. The EOTs remain for those who wish to add @font-face support for pre-9 Internet Explorer browsers. No need to upload the EOTs unless you modify the code to include serving them.

Just the Code

Stylesheet Link

<link href="webfonts/font-styles.css" rel="stylesheet" type="text/css">

@font-face

/* Stratum 1 Web Thin */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebThin/Stratum1WebThin.woff2') format('woff2'),
	     url('Stratum1WebThin/Stratum1WebThin.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	}

/* Stratum 1 Web Light */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebLight/Stratum1WebLight.woff2') format('woff2'),
	     url('Stratum1WebLight/Stratum1WebLight.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	}

/* Stratum 1 Web Regular */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebRegular/Stratum1WebRegular.woff2') format('woff2'),
	     url('Stratum1WebRegular/Stratum1WebRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	}

/* Stratum 1 Web Medium */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebMedium/Stratum1WebMedium.woff2') format('woff2'),
	     url('Stratum1WebMedium/Stratum1WebMedium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}

/* Stratum 1 Web Bold */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebBold/Stratum1WebBold.woff2') format('woff2'),
	     url('Stratum1WebBold/Stratum1WebBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	}

/* Stratum 1 Web Black */
	@font-face {
	font-family: 'Stratum1Web';
	src: url('Stratum1WebBlack/Stratum1WebBlack.woff2') format('woff2'),
	     url('Stratum1WebBlack/Stratum1WebBlack.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	}

/* Stratum 2 Web Thin */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebThin/Stratum2WebThin.woff2') format('woff2'),
	     url('Stratum2WebThin/Stratum2WebThin.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	}

/* Stratum 2 Web Light */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebLight/Stratum2WebLight.woff2') format('woff2'),
	     url('Stratum2WebLight/Stratum2WebLight.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	}

/* Stratum 2 Web Regular */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebRegular/Stratum2WebRegular.woff2') format('woff2'),
	     url('Stratum2WebRegular/Stratum2WebRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	}

/* Stratum 2 Web Medium */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebMedium/Stratum2WebMedium.woff2') format('woff2'),
	     url('Stratum2WebMedium/Stratum2WebMedium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}

/* Stratum 2 Web Bold */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebBold/Stratum2WebBold.woff2') format('woff2'),
	     url('Stratum2WebBold/Stratum2WebBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	}

/* Stratum 2 Web Black */
	@font-face {
	font-family: 'Stratum2Web';
	src: url('Stratum2WebBlack/Stratum2WebBlack.woff2') format('woff2'),
	     url('Stratum2WebBlack/Stratum2WebBlack.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	}

Classes

.Stratum1WebThin {
	font-family: 'Stratum1Web';
	font-weight: 200;
	font-style: normal;
	}

.Stratum1WebLight {
	font-family: 'Stratum1Web';
	font-weight: 300;
	font-style: normal;
	}

.Stratum1WebRegular {
	font-family: 'Stratum1Web';
	font-weight: 400;
	font-style: normal;
	}

.Stratum1WebMedium {
	font-family: 'Stratum1Web';
	font-weight: 500;
	font-style: normal;
	}

.Stratum1WebBold {
	font-family: 'Stratum1Web';
	font-weight: 700;
	font-style: normal;
	}

.Stratum1WebBlack {
	font-family: 'Stratum1Web';
	font-weight: 900;
	font-style: normal;
	}

.Stratum2WebThin {
	font-family: 'Stratum2Web';
	font-weight: 200;
	font-style: normal;
	}

.Stratum2WebLight {
	font-family: 'Stratum2Web';
	font-weight: 300;
	font-style: normal;
	}

.Stratum2WebRegular {
	font-family: 'Stratum2Web';
	font-weight: 400;
	font-style: normal;
	}

.Stratum2WebMedium {
	font-family: 'Stratum2Web';
	font-weight: 500;
	font-style: normal;
	}

.Stratum2WebBold {
	font-family: 'Stratum2Web';
	font-weight: 700;
	font-style: normal;
	}

.Stratum2WebBlack {
	font-family: 'Stratum2Web';
	font-weight: 900;
	font-style: normal;
	}

Bonus: OpenType Features

The following is a list of OpenType feature found in this font. ‘Ligatures’ will be listed for most fonts but it may be just dry ligatures like /fi or /fl. While OpenType feature support in browsers is growing, it’s not 100% yet. To implement any of the features, check out Adobe Font’s comprehensive guide.

  • Ligatures (liga)