Commercial Type

Installing and Using Web Fonts

Installing the Fonts

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

1. Upload the fonts to your website

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

2. Add a link to the css file

The @font-face block of code is what browsers use to implement the fonts. The code specifies the font name and lists links to different font files — woff and woff2 — which allows browsers to choose the format they need.

The @font-face code for the fonts you ordered is included in the fonts.css file bundled with the fonts.

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

The link looks like this:

<link rel="stylesheet" type="text/css" href="2305-COFYQV.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 are linked to the fonts, you can use the fonts to style your text.

In your style sheets, apply the attributes:

font-family
font-weight
font-style

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

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

Tips & Tricks

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 apply the 400 weight and font-weight:bold; to apply 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;

You can also use the emphasis <em> tag in the html to apply the italic style and <strong> tag to apply the bold weight.

Using OpenType Features

Commercial Type fonts include many typographic extras. This may include alternate letterforms, different number styles, small caps, and many others. The features for each font are detailed on the font’s web page on commercialtype.com and in the downloadable PDF specimens available on our site.

You can turn on OpenType features using the font-feature-settings property in the css.

.text-box {
  font-family: "MyFont", sans-serif;
  font-feature-settings: "liga" 1, "dlig" 1, "ss01" 1, “ss02”, 0;
}

In this example, the ligatures (liga), discretionary ligatures (dlig), and stylistic set 01 (ss01) features are enabled, and stylistic set 02 (ss02) has been disabled.

The exact feature names may vary depending on the font, so refer to the font's OpenType feature documentation to determine the correct feature names.

The OpenType features uses four-character codes instead of the full feature name. Here are several common OpenType feature codes:

kern kerning (usually turned on by default)
calt contextual alternates (should be turned on by default)
liga ligatures (usually turned on by default)
dlig discretionary ligatures
lnum lining numbers
onum oldstyle numerals
tnum tabular numbers
pnum proportional numbers
frac fractions
smcp small caps
c2sc caps-to-small caps
ss01 stylistic set 01
ss02 stylistic set 02
ss03…ss20
swsh swash letters
titl titling letters
zero slashed zero

Oh no! Something went wrong.

The 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:

  • The link in the head of your html document that contains a href to the css file.
  • The @font-face css code has several src:url links to the fonts.

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?

For Licensing Information, Questions, or Anything Else