Installing and Using Web 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.

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

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.

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.

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.

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

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.

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.

Email us at support@commercialtype.com

Email us at info@commercialtype.com