Using Web Fonts

Introduction

Today’s web features rich and responsive typography, with designers and developers almost entirely uninhibited in what they can achieve. What might surprise you is how easy it is to integrate the typeface of your choice into the design of your website.

Self-Hosted Fonts

While there are many pay-as-you-go web font hosting services, all web font licences sold directly by Dalton Maag are for self-hosting. You place the supplied web font files on your own web server and link to them directly. This approach gives you the greatest control over the fonts’ delivery and performance:

Specifying Fonts in CSS

There are two steps to specifying a web font in CSS. First, you link a family name (of your choosing, it doesn’t have to be the font family’s real name) to the font files on your server:

@font-face {
   font-family: 'MyChosenFonts1892';
   font-weight: 400;
   src: url('path-to-your-font.woff2') format('woff2'),
        url('path-to-your-font.woff') format('woff');
}

@font-face {
   font-family: 'MyChosenFonts1892';
	font-weight: 700;
   src: url('path-to-your-font-bold.woff2') format('woff2'),
        url('path-to-your-font-bold.woff') format('woff');
}

Second, you style your page content using that family name:

body {
   font-family: 'MyChosenFonts1892', sans-serif;
}

Recommendations

When specifying a font-family name in the @font-face, we recommend that you choose something unique, and not the family’s name as it appears in applications. This is so that there’s no chance of an unintended font substitution should the user have a different font family of the same name installed.

Compatibility

While raw OpenType (TTF and OTF) files can be used on the web, WOFF and WOFF2 files are considerably smaller and offer exactly the same features as uncompressed OpenType fonts.

There are other legacy web font formats that you will sometimes see references to, such as EOT (Embedded OpenType) and PFR (Portable Font Resource). These formats are no longer supported by any browser, so you won’t need to manage these files or provide them to your site visitors.

While SVG remains a popular scalable image format, its use as a font format is strongly discouraged. It doesn’t support typographic features, such as ligatures, and is very slow and memory intensive to display.

Variable Fonts on the Web

Using variable fonts on the web, with reliable fallback to static fonts if the user’s browser doesn’t support variable fonts, is very straightforward. There is a full section on web fonts in our variable font guide.

Be aware that variable web fonts are only provided in woff2 format as woff doesn’t support font variations.

External Resources