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.
Installing the Fonts
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?
Email us at support@commercialtype.com
For Licensing Information, Questions, or Anything Else
Email us at info@commercialtype.com