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
}
