Commercial

A Quick Guide to Installing and Using Web Fonts

Installing the fonts

Tips & Tricks

Troubleshooting

Contact

Installing the Fonts

The zip file that you received contains all the files necessary for self-hosting web fonts. It also includes a html file showing the fonts in use, and a css file with the @font-face code.

1: Upload the fonts to your website.

We recommend keeping all the fonts and css file together in a folder.

2: Add a link to the css file

The @font-face declaration is what browsers use to implement the fonts. The declaration specifies the font name and lists several links to different font files which allows browsers to choose the format they need.

The @font-face code for the fonts you ordered is included on this page, in the column on the right. It's also bundled with the fonts in a file named fonts.css.

To access the fonts, simply include a link to the css file in the head of your html document.

The link looks like this:

<link rel="stylesheet" type="text/css" href="fonts.css">

The href is the path from the html file to the css file. You may need to fix the path depending on your file structure.

3: Style the text in your document.

Now that the html pages have access to the fonts, you can use the fonts to style your text.

In your style sheets, apply the attributes:

You can find the values for these in the @font-face code in the css file.

All three are necessary to get the font working in all browsers.

Tips & Tricks

Turn on kerning:

All Commercial fonts contain kerning, but it needs to be turned on in the CSS for it to work.

To turn on kerning, include the following attributes in your css.

body {
font-feature-settings: "liga", "kern";
}

We suggest including them in the body element so they apply to all text on the page

Changing Font Weights and Italics

The css supplied for each font uses the same font-family for all styles of the family. This simplifies the process of changing the font weight or italicizing text.

To change from one font weight to another, keep the font-family the same and change the font-weight value.

We suggest using the numerical font-weight value (100-900), but you can also use font-weight:normal; to get the 400 weight and font-weight:bold; to get the 700 weight.

If you are using both a roman and an italic in your text, you can easily switch back and forth between roman and italics by changing the font-style attribute from font-style:roman; to font-style:italic;

Or you can use the emphasis <em> tag in the html to apply the italic.

What about other @font-face methods?

There are several other versions of the @font-face code that can be used to implement web fonts, like Bulletproof, Mo' Bulletproofer and Smiley (☺︎)

These methods were developed in the early days of web fonts as browsers started to accept web fonts and evolved to handle unexpected behavior from some browsers.

That was several years ago. These days support for web fonts have been formalized.

The @font-face code provided with the fonts is the most robust code that supports the greatest number of both modern and legacy browsers. We not only do we recommend that you use it, we use the same code on CommercialType.com

Oh no! Something went wrong.

Fonts aren't appearing on the site

Check on the urls to make sure they're pointing at the right place.

There are two places to look:

See that these links specify to the correct location of the files. If you've moved files around they may need to be changed.

The fonts work in some browsers, but not other browsers

Make sure you've specified the font-family, font-weight and font-style and that they match the values in the @font-face code.

Some browsers look for the font-family, and then try to match the closest font-weight (if it can't find 900, it will use 700 instead), but other browsers look for a perfect match of font-weight and font-family and fall back to another font-family when it can't find the font-weight it's looking for.

Contact Us

Still having trouble?

Email us at support@commercialtype.com

For Licensing Information, Questions, or Anything Else:

info@commercialtype.com

What's Inside Your Order:

Everyday Sans Web Light

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-Light-Web.woff2') format('woff2'),
url('EverydaySans-Light-Web.woff') format('woff');
font-weight: 300;
font-style: normal;
}

A CSS class using the font:

.EverydaySans-Light-Web {
font-family: 'Everyday Sans Web';
font-weight: 300;
font-style: normal;
}

Everyday Sans Web Light Italic

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-LightItalic-Web.woff2') format('woff2'),
url('EverydaySans-LightItalic-Web.woff') format('woff');
font-weight: 300;
font-style: italic;
}

A CSS class using the font:

.EverydaySans-LightItalic-Web {
font-family: 'Everyday Sans Web';
font-weight: 300;
font-style: italic;
}

Everyday Sans Web Regular

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-Regular-Web.woff2') format('woff2'),
url('EverydaySans-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
}

A CSS class using the font:

.EverydaySans-Regular-Web {
font-family: 'Everyday Sans Web';
font-weight: 400;
font-style: normal;
}

Everyday Sans Web Regular Italic

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-RegularItalic-Web.woff2') format('woff2'),
url('EverydaySans-RegularItalic-Web.woff') format('woff');
font-weight: 400;
font-style: italic;
}

A CSS class using the font:

.EverydaySans-RegularItalic-Web {
font-family: 'Everyday Sans Web';
font-weight: 400;
font-style: italic;
}

Everyday Sans Web Medium

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-Medium-Web.woff2') format('woff2'),
url('EverydaySans-Medium-Web.woff') format('woff');
font-weight: 500;
font-style: normal;
}

A CSS class using the font:

.EverydaySans-Medium-Web {
font-family: 'Everyday Sans Web';
font-weight: 500;
font-style: normal;
}

Everyday Sans Web Medium Italic

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-MediumItalic-Web.woff2') format('woff2'),
url('EverydaySans-MediumItalic-Web.woff') format('woff');
font-weight: 500;
font-style: italic;
}

A CSS class using the font:

.EverydaySans-MediumItalic-Web {
font-family: 'Everyday Sans Web';
font-weight: 500;
font-style: italic;
}

Everyday Sans Web Bold

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-Bold-Web.woff2') format('woff2'),
url('EverydaySans-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
}

A CSS class using the font:

.EverydaySans-Bold-Web {
font-family: 'Everyday Sans Web';
font-weight: 700;
font-style: normal;
}

Everyday Sans Web Bold Italic

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-BoldItalic-Web.woff2') format('woff2'),
url('EverydaySans-BoldItalic-Web.woff') format('woff');
font-weight: 700;
font-style: italic;
}

A CSS class using the font:

.EverydaySans-BoldItalic-Web {
font-family: 'Everyday Sans Web';
font-weight: 700;
font-style: italic;
}

Everyday Sans Web Black

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-Black-Web.woff2') format('woff2'),
url('EverydaySans-Black-Web.woff') format('woff');
font-weight: 900;
font-style: normal;
}

A CSS class using the font:

.EverydaySans-Black-Web {
font-family: 'Everyday Sans Web';
font-weight: 900;
font-style: normal;
}

Everyday Sans Web Black Italic

The @font-face code:

@font-face {
font-family: 'Everyday Sans Web';
src: url('EverydaySans-BlackItalic-Web.woff2') format('woff2'),
url('EverydaySans-BlackItalic-Web.woff') format('woff');
font-weight: 900;
font-style: italic;
}

A CSS class using the font:

.EverydaySans-BlackItalic-Web {
font-family: 'Everyday Sans Web';
font-weight: 900;
font-style: italic;
}