Installing Webfonts

How do I use webfonts?

Webfonts are support by all major browsers, however you may be surprised to hear that they all work in slightly different ways. In order to cover all browsers there are four main formats that must be used; TTF, WOFF, EOT, and SVG.

How do I install webfonts?

Webfonts work by uploading the webfont kit to your website, linking the font in the CSS for your website, and instructing the stylesheet for oyur webpage to use the named font. The @font-face CSS allows all web browsers to display the correct font online. The correct code will be generated by the webfont kit, all you need to do is to link to it in the style sheet as follows:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

For example, installing the webfont for F37 Ginger would change the CSS code from this: 

font-family: 'My Webfont'; 

To this:

font-family: 'F37 Ginger'; 

Different font formats will be used by different browsers, so be sure to test your page. You can preview what the text looks like online by clicking the 'Webfont' tab on any font product page. All of our fonts are @font-face based CSS and self hosted only.