Skip to content

How To Use Webfonts

Information

1

There are specific file formats that are designed to be used in embedded text on websites. These formats include:

— .woff2 (the most widely used, highly compressed format)
— .woff (second to woff2, it’s predecessor)
— .ttf (native format, rarely used)
— .eot (deprecated, only used for <IE11) 

2

Non-standard fonts can be installed by using the @font-face feature in CSS. This feature allows you to load custom fonts into a stylesheet which the host browser will use to download the font and display it in its CSS.
CSS
@font-face {
  font-family: 'BasisGrotesque';
  src:  url('basisgrotesque.woff2') format('woff2')
}

3

The best method of installing multiple styles or font weights onto a site is to use the unique font names for each style alongside using the font-weight and font-style attributes to specify the data of each font style. e.g.:
CSS
@font-face {
  font-family: 'BasisGrotesqueRegular';
  src:  url('basisgrotesqueregular.woff2') format('woff2'),
  font-weight: 400; 
  font-style: normal
}

@font-face {
  font-family: 'BasisGrotesqueBold';
  src:  url('basisgrotesquebold.woff2') format('woff2'),
  font-weight: 700; 
  font-style: normal
}

@font-face {
  font-family: 'BasisGrotesqueBoldItalic';
  src:  url('basisgrotesquebolditalic.woff2') format('woff2'),
  font-weight: 700; 
  font-style: italic
}

4

Basic implementation of variable fonts follows the same rules as above. Depending on the axes available in the variable file, web designers can use different attributes such as font-weight, font-stretch, font-style, font-optical-sizing to set the variable file to a specified instance.

Font-weight can be set to anywhere between 1-999 and will determine the weight of the typeface.

Font-stretch determines the width of a typeface and is based on a percentage value; 100% is proportional, 50% is condensed, and 200% is expanded.

Font-style determines the slant of a typeface between -90deg and 90deg

font-optical-sizing uses the value auto or none to turn on optical sizing. 

Other Guides

https://css-tricks.com/snippets/css/using-font-face-in-css/
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/
Guides
View All