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
- Miss any steps? Go back through the steps above and make sure you didn’t miss anything.
- Check your paths. If you renamed the webfonts folder or put it anywhere other than the root, you’ll need to rewrite paths. Check the paths to the fonts in the @font-face declarations in webfonts/font-styles.css and the path to font-styles.css in the
<link>. - Did you style any text in your HTML page? If you used classes, check the spelling of the class and make sure it matches its mate in the stylesheet. Double check that the starting period that defines a class in the stylesheet didn’t end up in your HTML where you refer to that class.
- Check your syntax. Missing or misplaced commas, quotes, braces, colons or semi colons cause a lot of heartbreak. If you modified the @font-face code or added styles, check your syntax to make sure everything is in its proper spots. Also check that you don’t have any curly quotes in your code (curly quotes in text are great, but they tend to break things in HTML and CSS).
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.