Using Webfonts

If you've purchased a Webfont License, here’s a basic guide on how to use Webfonts on your website using @font-face:

First, unzip the font product files.

When you’ve been able to open the files and folders, look for a folder called “Webfonts” or “webfont-kit”. Note: If you do not see these webfonts, please contact the Support Team, and we'll be happy to help you out. 

In the webfonts folder, you’ll see a number of files in various formats:


These include files in TTF, WOFF, EOT and SVG format. Select all of the files in these formats and copy them to your website’s CSS folder. Also copy the stylesheet.css file to that same main CSS folder.

In your website's main HTML folder, link your font’s stylesheet with this code:

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


(If you have renamed your font’s stylesheet to something else like, “fonts.css” make sure this line of code reflects that change.) 

@font-face {
font-family: 'capriccioplain';
src: url('capriccio-plain-webfont.eot');
src: url('capriccio-plain-webfont.eot?#iefix') format('embedded-opentype'),
url('capriccio-plain-webfont.woff2') format('woff2'),
url('capriccio-plain-webfont.woff') format('woff'),
url('capriccio-plain-webfont.ttf') format('truetype'),
url('capriccio-plain-webfont.svg#capriccioplain') format('svg');
font-weight: normal;
font-style: normal;


Copy the property found in the font-family: parameter (i.e. capriccioplain). You need to use this name to describe your font.

In your main website stylesheet, you can use this font name if you want to add it to a specific css selector. For example, if you’d like to use this font on the h1 tag, create a declaration for h1 in your main stylesheet, like this:

h1 {
font-family: 'capriccioplain';
color: blue;

Did this article answer your question?

0 out of 0 found this helpful