WebFont Guide


Introduction

This guide is intended for users with a basic knowledge of CSS. To get acquainted with CSS, we recommend following the w3school tutorials.

Your Web Font Kit

VirusFonts offer three web font formats: Web Open Font Format 1.0 (WOFF), Web Open Font Format 2.0 (WOFF2) and Embedded Open Type (EOT). WOFF is the most widely supported format, WOFF2 offers better compression than WOFF but is only supported by the most modern browsers, and EOT is supplied for use on older versions of Internet Explorer (IE8 and below). These formats are included in the WebFontKit folder alongside a CSS file. The CSS will look like this:

@font-face {
    font-family: 'Coma-Regular';
    src: url('Coma-Regular.eot'); /* for use on IE9 Compatibility Mode */
    src: url('Coma-Regular.eot?#iefix') format('embedded-opentype'), /* for use on IE6-IE8 */
    url('Coma-Regular.woff2') format('woff2'), /* for use on the most modern browsers */
    url('Coma-Regular.woff') format('woff'), /* for use on most browsers */
    font-weight: normal;
    font-style: normal;
}

Installation and Use

Upload Your Web Font Kit Files

The contents of your WebFontKit folder should be uploaded to the root folder of your site. You can either use the CSS file as supplied or you can copy the CSS into your own style sheet and adapt to your specifications.

Adapt Your CSS

The value of the font-family property (Coma-Regular in the example above) is used internally in your CSS definitions, so it can be set to any name you like. You should keep the name shorter than 32 characters, otherwise Internet Explorer will not display your web fonts. For example:

@font-face {
font-family: 'MyComa';
src: url('Coma-Regular.eot'); /* for use on IE9 Compatibility Mode */
src: url('Coma-Regular.eot?#iefix') format('embedded-opentype'), /* for use on IE6-IE8 */
url('Coma-Regular.woff2') format('woff2'), /* for use on the most modern browsers */
url('Coma-Regular.woff') format('woff'), /* for use on most browsers */
font-weight: normal;
font-style: normal;
}

If you want to keep your CSS file in the root folder but move your font files into a separate directory (for example /fonts), you should to change your CSS to include the appropriate path. For example:

@font-face {
font-family: 'MyComa';
src: url('/fonts/Coma-Regular.eot'); /* for use on IE9 Compatibility Mode */
src: url('/fonts/Coma-Regular.eot?#iefix') format('embedded-opentype'), /* for use on IE6-IE8 */
url('/fonts/Coma-Regular.woff2') format('woff2'), /* for use on the most modern browsers */
url('/fonts/Coma-Regular.woff') format('woff'), /* for use on most browsers */
font-weight: normal;
font-style: normal;
}

If you then want to place your CSS file in a different directory within your root folder (for example /CSS), you should to change your CSS to include the appropriate path. For example:

@font-face {
font-family: ‘MyComa’;
src: url(‘../fonts/Coma-Regular.eot’); /* for use on IE9 Compatibility Mode */
src: url(‘../fonts/Coma-Regular.eot?#iefix’) format(’embedded-opentype’), /* for use on IE6-IE8 */
url(‘../fonts/Coma-Regular.woff2′) format(‘woff2′), /* for use on the most modern browsers */
url(‘../fonts/Coma-Regular.woff’) format(‘woff’), /* for use on most browsers */
font-weight: normal;
font-style: normal;
}

Link Your CSS

Place a link to your CSS file in the <head> of your HTML document. Make sure this appears on all HTML pages of your site. If you upload the CSS file to the root folder of your site then the link should look like this:

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

Please note, the reference Coma-Regular.css should be replaced with the correct CSS filename as it appears in your kit. Alternatively, you can link to your own CSS stylesheet (as long as it contains the @font-face rule).

Deploy Your VirusFont

You are now ready to deploy! Pair your chosen HTML element with your CSS setting:

p {
font-family: 'MyComa', Arial, sans-serif;
}

Advanced Typography Using CSS

Numeric Font Weights & Font Stretching

Font families that have an extended range of weights are able to make use of numeric font weights. Numeric font weights allow you to map a specific weight to a number ranging from 100 to 900:

100 Hairline
200 Thin
300 Light
400 Regular
500 Medium
600 Demi Bold
700 Bold
800 Ultra Bold
900 Black

If a font includes multiple width variations, you can use the font-stretch property to select the appropriate value from condensed, normal or expanded. Please bear in mind that support for font-stretch is limited.

You can use both numeric font-weight and font-stretch properties inside your @font-face rules.

@font-face {
font-family: 'Bourgeois-Light-Condensed-Italic';
src: url('Bourgeois-Light-Condensed-Italic.eot'); /* for use on IE9 Compatibility Mode */
src: url('Bourgeois-Light-Condensed-Italic.eot?#iefix') format('embedded-opentype'), /* for use on IE6-IE8 */
url('Bourgeois-Light-Condensed-Italic.woff2') format('woff2'), /* for use on the most modern browsers */
url('Bourgeois-Light-Condensed-Italic.woff') format('woff'), /* for use on most browsers */
font-weight: 300;
font-style: italic;
font-stretch: condensed;
}

Font Style-Linking

Style-linking is a process that works with the HTML tags <em> (emphasis: italic by default) and <strong> (strong emphasis: bold by default). It means that the correct version of italic or bold is used rather than force-bold or force-italic that can be imposed by a browser.

Use the font-weight and font-style properties inside your @font-face rules to define groups of style-linked fonts under a common family name.

@font-face {
font-family: 'MyBourgeoisFamily';
src: url('Bourgeois-Medium.woff') format('woff');
font-weight: normal;
}

@font-face {
font-family: 'MyBourgeoisFamily';
src: url('Bourgeois-MediumItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'MyBourgeoisFamily';
src: url('Bourgeois-Bold.woff') format('woff');
font-weight: bold;
}

@font-face {
font-family: 'MyBourgeoisFamily';
src: url('Bourgeois-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}

p {
font-family: 'MyBourgeoisFamily', Arial, sans-serif;
}

Font Feature Settings

VirusFonts for the web include OpenType features that can be activated using the CSS property font-feature-settings. The features available in your web font are indicated in the font specimen PDF supplied with your download. VirusFonts for the web may include any of the following features:

dlig discretionary ligatures
frac fractions
hist historical forms
liga standard ligatures
lnum lining figures
onum old style figures
pnum proportional figures
salt stylistic alternates
ss** stylistic sets
swsh swashes
tnum tabular figures

To activate a feature, declare which value you need in quotes and enable them using 1 or on. Disable with either 0 or off (respectively):

p {
font-feature-settings: 'liga' 1;
}

Multiple features can be activated using a comma separated list:

p {
font-feature-settings: 'dlig' 1, 'swsh' 1, 'ss01' 1;
}