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 1511-XIHWJF.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="1511-XIHWJF.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.

4. Add .htaccess rules

The .htaccess is a text file that instructs your server in how browsers may access files in the directory.

If you are using an Apache web server, our webfont license requires you to include a text file named .htaccess in the font folder with these rules:

Options -Indexes
IndexIgnore *.ttf
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?website.com/.*$ [NC]
RewriteRule \.ttf$ - [F]

Where website.com is the site where the fonts are being used.

This is to protect the fonts from being linked to by another site, and will in no way affect performance on your site.

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 {
-moz-font-feature-settings: "liga", "kern";
-moz-font-feature-settings:"liga=1, kern=1";
-ms-font-feature-settings:"liga", "kern";
-o-font-feature-settings:"liga", "kern";
-webkit-font-feature-settings:"liga", "kern";
font-feature-settings: "liga", "kern";
}

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

Add Fallback Fonts (a.k.a. Font Stacks):

CSS allows you to specify a list of fallback fonts in the font-family attribute, which allows you to control which system font is displayed in the unlikely event that a font does not load, or if the preferred font doesn't contain a specific character.

We have listed some suggested fallback fonts in the classes provided for each style (in the sidebar or in the bundled css file). If you're adding fonts to an existing stylesheet, make sure you also copy the fallback fonts.

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.

Error message when installing TrueType fonts

The TrueType fonts have been disabled for desktop use and can not be installed on a desktop computer.

The fonts work just fine when used in a browser via @font-face.

This is done to keep people from stealing the fonts directly from a website, while still providing support for older browsers.

If you need desktop fonts you can license them directly from commercialtype.com.

Contact Us

Still having trouble?

Email us at support@commercialtype.com

For Licensing Information, Questions, or Anything Else:

info@commercialtype.com

What's Inside Order: 1511-XIHWJF

Lyon Text Black Italic

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-BlackItalic-Web.eot');
src: url('LyonText-BlackItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-BlackItalic-Web.woff') format('woff'),
url('LyonText-BlackItalic-Web.ttf') format('truetype'),
url('LyonText-BlackItalic-Web.svg#Lyon Text Web') format('svg');
font-weight: 900;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-BlackItalic-Web {
font-family: 'Lyon Text Web';
font-weight: 900;
font-style: italic;
font-stretch: normal;
}



Lyon Text Black

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-Black-Web.eot');
src: url('LyonText-Black-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-Black-Web.woff') format('woff'),
url('LyonText-Black-Web.ttf') format('truetype'),
url('LyonText-Black-Web.svg#Lyon Text Web') format('svg');
font-weight: 900;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-Black-Web {
font-family: 'Lyon Text Web';
font-weight: 900;
font-style: normal;
font-stretch: normal;
}



Lyon Text Bold Italic

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-BoldItalic-Web.eot');
src: url('LyonText-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-BoldItalic-Web.woff') format('woff'),
url('LyonText-BoldItalic-Web.ttf') format('truetype'),
url('LyonText-BoldItalic-Web.svg#Lyon Text Web') format('svg');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-BoldItalic-Web {
font-family: 'Lyon Text Web';
font-weight: 700;
font-style: italic;
font-stretch: normal;
}



Lyon Text Bold

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-Bold-Web.eot');
src: url('LyonText-Bold-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-Bold-Web.woff') format('woff'),
url('LyonText-Bold-Web.ttf') format('truetype'),
url('LyonText-Bold-Web.svg#Lyon Text Web') format('svg');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-Bold-Web {
font-family: 'Lyon Text Web';
font-weight: 700;
font-style: normal;
font-stretch: normal;
}



Lyon Text Semibold Italic

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-SemiboldItalic-Web.eot');
src: url('LyonText-SemiboldItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-SemiboldItalic-Web.woff') format('woff'),
url('LyonText-SemiboldItalic-Web.ttf') format('truetype'),
url('LyonText-SemiboldItalic-Web.svg#Lyon Text Web') format('svg');
font-weight: 600;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-SemiboldItalic-Web {
font-family: 'Lyon Text Web';
font-weight: 600;
font-style: italic;
font-stretch: normal;
}



Lyon Text Semibold

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-Semibold-Web.eot');
src: url('LyonText-Semibold-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-Semibold-Web.woff') format('woff'),
url('LyonText-Semibold-Web.ttf') format('truetype'),
url('LyonText-Semibold-Web.svg#Lyon Text Web') format('svg');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-Semibold-Web {
font-family: 'Lyon Text Web';
font-weight: 600;
font-style: normal;
font-stretch: normal;
}



Lyon Text Regular Italic No 2

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-RegularNo2Italic-Web.eot');
src: url('LyonText-RegularNo2Italic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-RegularNo2Italic-Web.woff') format('woff'),
url('LyonText-RegularNo2Italic-Web.ttf') format('truetype'),
url('LyonText-RegularNo2Italic-Web.svg#Lyon Text Web') format('svg');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-RegularNo2Italic-Web {
font-family: 'Lyon Text Web';
font-weight: 400;
font-style: italic;
font-stretch: normal;
}



Lyon Text Regular No 2

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-RegularNo2-Web.eot');
src: url('LyonText-RegularNo2-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-RegularNo2-Web.woff') format('woff'),
url('LyonText-RegularNo2-Web.ttf') format('truetype'),
url('LyonText-RegularNo2-Web.svg#Lyon Text Web') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-RegularNo2-Web {
font-family: 'Lyon Text Web';
font-weight: 400;
font-style: normal;
font-stretch: normal;
}



Lyon Text Regular Italic

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-RegularItalic-Web.eot');
src: url('LyonText-RegularItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-RegularItalic-Web.woff') format('woff'),
url('LyonText-RegularItalic-Web.ttf') format('truetype'),
url('LyonText-RegularItalic-Web.svg#Lyon Text Web') format('svg');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-RegularItalic-Web {
font-family: 'Lyon Text Web';
font-weight: 400;
font-style: italic;
font-stretch: normal;
}



Lyon Text Regular

The @font-face code:

@font-face {
font-family: 'Lyon Text Web';
src: url('LyonText-Regular-Web.eot');
src: url('LyonText-Regular-Web.eot?#iefix') format('embedded-opentype'),
url('LyonText-Regular-Web.woff') format('woff'),
url('LyonText-Regular-Web.ttf') format('truetype'),
url('LyonText-Regular-Web.svg#Lyon Text Web') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonText-Regular-Web {
font-family: 'Lyon Text Web';
font-weight: 400;
font-style: normal;
font-stretch: normal;
}



Lyon Display Black Italic

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-BlackItalic-Web.eot');
src: url('LyonDisplay-BlackItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-BlackItalic-Web.woff') format('woff'),
url('LyonDisplay-BlackItalic-Web.ttf') format('truetype'),
url('LyonDisplay-BlackItalic-Web.svg#Lyon Display Web') format('svg');
font-weight: 900;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-BlackItalic-Web {
font-family: 'Lyon Display Web';
font-weight: 900;
font-style: italic;
font-stretch: normal;
}



Lyon Display Black

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-Black-Web.eot');
src: url('LyonDisplay-Black-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-Black-Web.woff') format('woff'),
url('LyonDisplay-Black-Web.ttf') format('truetype'),
url('LyonDisplay-Black-Web.svg#Lyon Display Web') format('svg');
font-weight: 900;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-Black-Web {
font-family: 'Lyon Display Web';
font-weight: 900;
font-style: normal;
font-stretch: normal;
}



Lyon Display Bold Italic

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-BoldItalic-Web.eot');
src: url('LyonDisplay-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-BoldItalic-Web.woff') format('woff'),
url('LyonDisplay-BoldItalic-Web.ttf') format('truetype'),
url('LyonDisplay-BoldItalic-Web.svg#Lyon Display Web') format('svg');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-BoldItalic-Web {
font-family: 'Lyon Display Web';
font-weight: 700;
font-style: italic;
font-stretch: normal;
}



Lyon Display Bold

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-Bold-Web.eot');
src: url('LyonDisplay-Bold-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-Bold-Web.woff') format('woff'),
url('LyonDisplay-Bold-Web.ttf') format('truetype'),
url('LyonDisplay-Bold-Web.svg#Lyon Display Web') format('svg');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-Bold-Web {
font-family: 'Lyon Display Web';
font-weight: 700;
font-style: normal;
font-stretch: normal;
}



Lyon Display Medium Italic

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-MediumItalic-Web.eot');
src: url('LyonDisplay-MediumItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-MediumItalic-Web.woff') format('woff'),
url('LyonDisplay-MediumItalic-Web.ttf') format('truetype'),
url('LyonDisplay-MediumItalic-Web.svg#Lyon Display Web') format('svg');
font-weight: 500;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-MediumItalic-Web {
font-family: 'Lyon Display Web';
font-weight: 500;
font-style: italic;
font-stretch: normal;
}



Lyon Display Medium

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-Medium-Web.eot');
src: url('LyonDisplay-Medium-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-Medium-Web.woff') format('woff'),
url('LyonDisplay-Medium-Web.ttf') format('truetype'),
url('LyonDisplay-Medium-Web.svg#Lyon Display Web') format('svg');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-Medium-Web {
font-family: 'Lyon Display Web';
font-weight: 500;
font-style: normal;
font-stretch: normal;
}



Lyon Display Regular Italic

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-RegularItalic-Web.eot');
src: url('LyonDisplay-RegularItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-RegularItalic-Web.woff') format('woff'),
url('LyonDisplay-RegularItalic-Web.ttf') format('truetype'),
url('LyonDisplay-RegularItalic-Web.svg#Lyon Display Web') format('svg');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-RegularItalic-Web {
font-family: 'Lyon Display Web';
font-weight: 400;
font-style: italic;
font-stretch: normal;
}



Lyon Display Regular

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-Regular-Web.eot');
src: url('LyonDisplay-Regular-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-Regular-Web.woff') format('woff'),
url('LyonDisplay-Regular-Web.ttf') format('truetype'),
url('LyonDisplay-Regular-Web.svg#Lyon Display Web') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-Regular-Web {
font-family: 'Lyon Display Web';
font-weight: 400;
font-style: normal;
font-stretch: normal;
}



Lyon Display Light Italic

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-LightItalic-Web.eot');
src: url('LyonDisplay-LightItalic-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-LightItalic-Web.woff') format('woff'),
url('LyonDisplay-LightItalic-Web.ttf') format('truetype'),
url('LyonDisplay-LightItalic-Web.svg#Lyon Display Web') format('svg');
font-weight: 300;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-LightItalic-Web {
font-family: 'Lyon Display Web';
font-weight: 300;
font-style: italic;
font-stretch: normal;
}



Lyon Display Light

The @font-face code:

@font-face {
font-family: 'Lyon Display Web';
src: url('LyonDisplay-Light-Web.eot');
src: url('LyonDisplay-Light-Web.eot?#iefix') format('embedded-opentype'),
url('LyonDisplay-Light-Web.woff') format('woff'),
url('LyonDisplay-Light-Web.ttf') format('truetype'),
url('LyonDisplay-Light-Web.svg#Lyon Display Web') format('svg');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.LyonDisplay-Light-Web {
font-family: 'Lyon Display Web';
font-weight: 300;
font-style: normal;
font-stretch: normal;
}



Graphik Super Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-SuperItalic-Web.eot');
src: url('Graphik-SuperItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-SuperItalic-Web.woff') format('woff'),
url('Graphik-SuperItalic-Web.ttf') format('truetype'),
url('Graphik-SuperItalic-Web.svg#Graphik-SuperItalic') format('svg');
font-weight: 900;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-SuperItalic-Web {
font-family: 'Graphik Web';
font-weight: 900;
font-style: italic;
font-stretch: normal;
}



Graphik Super

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Super-Web.eot');
src: url('Graphik-Super-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Super-Web.woff') format('woff'),
url('Graphik-Super-Web.ttf') format('truetype'),
url('Graphik-Super-Web.svg#Graphik-Super') format('svg');
font-weight: 900;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Super-Web {
font-family: 'Graphik Web';
font-weight: 900;
font-style: normal;
font-stretch: normal;
}



Graphik Black Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-BlackItalic-Web.eot');
src: url('Graphik-BlackItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-BlackItalic-Web.woff') format('woff'),
url('Graphik-BlackItalic-Web.ttf') format('truetype'),
url('Graphik-BlackItalic-Web.svg#Graphik-BlackItalic') format('svg');
font-weight: 800;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-BlackItalic-Web {
font-family: 'Graphik Web';
font-weight: 800;
font-style: italic;
font-stretch: normal;
}



Graphik Black

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Black-Web.eot');
src: url('Graphik-Black-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Black-Web.woff') format('woff'),
url('Graphik-Black-Web.ttf') format('truetype'),
url('Graphik-Black-Web.svg#Graphik-Black') format('svg');
font-weight: 800;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Black-Web {
font-family: 'Graphik Web';
font-weight: 800;
font-style: normal;
font-stretch: normal;
}



Graphik Bold Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-BoldItalic-Web.eot');
src: url('Graphik-BoldItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-BoldItalic-Web.woff') format('woff'),
url('Graphik-BoldItalic-Web.ttf') format('truetype'),
url('Graphik-BoldItalic-Web.svg#Graphik-BoldItalic') format('svg');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-BoldItalic-Web {
font-family: 'Graphik Web';
font-weight: 700;
font-style: italic;
font-stretch: normal;
}



Graphik Bold

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Bold-Web.eot');
src: url('Graphik-Bold-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Bold-Web.woff') format('woff'),
url('Graphik-Bold-Web.ttf') format('truetype'),
url('Graphik-Bold-Web.svg#Graphik-Bold') format('svg');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Bold-Web {
font-family: 'Graphik Web';
font-weight: 700;
font-style: normal;
font-stretch: normal;
}



Graphik Semibold Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-SemiboldItalic-Web.eot');
src: url('Graphik-SemiboldItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-SemiboldItalic-Web.woff') format('woff'),
url('Graphik-SemiboldItalic-Web.ttf') format('truetype'),
url('Graphik-SemiboldItalic-Web.svg#Graphik-SemiboldItalic') format('svg');
font-weight: 600;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-SemiboldItalic-Web {
font-family: 'Graphik Web';
font-weight: 600;
font-style: italic;
font-stretch: normal;
}



Graphik Semibold

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Semibold-Web.eot');
src: url('Graphik-Semibold-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Semibold-Web.woff') format('woff'),
url('Graphik-Semibold-Web.ttf') format('truetype'),
url('Graphik-Semibold-Web.svg#Graphik-Semibold') format('svg');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Semibold-Web {
font-family: 'Graphik Web';
font-weight: 600;
font-style: normal;
font-stretch: normal;
}



Graphik Medium Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-MediumItalic-Web.eot');
src: url('Graphik-MediumItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-MediumItalic-Web.woff') format('woff'),
url('Graphik-MediumItalic-Web.ttf') format('truetype'),
url('Graphik-MediumItalic-Web.svg#Graphik-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-MediumItalic-Web {
font-family: 'Graphik Web';
font-weight: 500;
font-style: italic;
font-stretch: normal;
}



Graphik Medium

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Medium-Web.eot');
src: url('Graphik-Medium-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Medium-Web.woff') format('woff'),
url('Graphik-Medium-Web.ttf') format('truetype'),
url('Graphik-Medium-Web.svg#Graphik-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Medium-Web {
font-family: 'Graphik Web';
font-weight: 500;
font-style: normal;
font-stretch: normal;
}



Graphik Regular Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-RegularItalic-Web.eot');
src: url('Graphik-RegularItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-RegularItalic-Web.woff') format('woff'),
url('Graphik-RegularItalic-Web.ttf') format('truetype'),
url('Graphik-RegularItalic-Web.svg#Graphik-RegularItalic') format('svg');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-RegularItalic-Web {
font-family: 'Graphik Web';
font-weight: 400;
font-style: italic;
font-stretch: normal;
}



Graphik Regular

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Regular-Web.eot');
src: url('Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Regular-Web.woff') format('woff'),
url('Graphik-Regular-Web.ttf') format('truetype'),
url('Graphik-Regular-Web.svg#Graphik-Regular') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Regular-Web {
font-family: 'Graphik Web';
font-weight: 400;
font-style: normal;
font-stretch: normal;
}



Graphik Light Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-LightItalic-Web.eot');
src: url('Graphik-LightItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-LightItalic-Web.woff') format('woff'),
url('Graphik-LightItalic-Web.ttf') format('truetype'),
url('Graphik-LightItalic-Web.svg#Graphik-LightItalic') format('svg');
font-weight: 300;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-LightItalic-Web {
font-family: 'Graphik Web';
font-weight: 300;
font-style: italic;
font-stretch: normal;
}



Graphik Light

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Light-Web.eot');
src: url('Graphik-Light-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Light-Web.woff') format('woff'),
url('Graphik-Light-Web.ttf') format('truetype'),
url('Graphik-Light-Web.svg#Graphik-Light') format('svg');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Light-Web {
font-family: 'Graphik Web';
font-weight: 300;
font-style: normal;
font-stretch: normal;
}



Graphik Extralight Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-ExtralightItalic-Web.eot');
src: url('Graphik-ExtralightItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-ExtralightItalic-Web.woff') format('woff'),
url('Graphik-ExtralightItalic-Web.ttf') format('truetype'),
url('Graphik-ExtralightItalic-Web.svg#Graphik-ExtralightItalic') format('svg');
font-weight: 200;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-ExtralightItalic-Web {
font-family: 'Graphik Web';
font-weight: 200;
font-style: italic;
font-stretch: normal;
}



Graphik Extralight

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Extralight-Web.eot');
src: url('Graphik-Extralight-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Extralight-Web.woff') format('woff'),
url('Graphik-Extralight-Web.ttf') format('truetype'),
url('Graphik-Extralight-Web.svg#Graphik-Extralight') format('svg');
font-weight: 200;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Extralight-Web {
font-family: 'Graphik Web';
font-weight: 200;
font-style: normal;
font-stretch: normal;
}



Graphik Thin Italic

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-ThinItalic-Web.eot');
src: url('Graphik-ThinItalic-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-ThinItalic-Web.woff') format('woff'),
url('Graphik-ThinItalic-Web.ttf') format('truetype'),
url('Graphik-ThinItalic-Web.svg#Graphik-ThinItalic') format('svg');
font-weight: 100;
font-style: italic;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-ThinItalic-Web {
font-family: 'Graphik Web';
font-weight: 100;
font-style: italic;
font-stretch: normal;
}



Graphik Thin

The @font-face code:

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Thin-Web.eot');
src: url('Graphik-Thin-Web.eot?#iefix') format('embedded-opentype'),
url('Graphik-Thin-Web.woff') format('woff'),
url('Graphik-Thin-Web.ttf') format('truetype'),
url('Graphik-Thin-Web.svg#Graphik-Thin') format('svg');
font-weight: 100;
font-style: normal;
font-stretch: normal;
}

A CSS class using the font:

.Graphik-Thin-Web {
font-family: 'Graphik Web';
font-weight: 100;
font-style: normal;
font-stretch: normal;
}