Fonts

There are multiple approaches!

System Fonts

System fonts are those fonts already installed on the visitor's device. While using system fonts certainly limits the material to be downloaded, this places limits on the designer as well.

Downloadable Fonts

Numerous sources provide fonts for use in web design. These are downloaded by the browser as needed, assuming the provider is online.

Google Fonts is an excellent source.

These are used by linking the HTML or CSS file to the source and then referencing the fonts in the CSS.

HTML

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

CSS

p {font-family: 'Pacifico', cursive;}

Self-Hosted Downloadable Fonts

Rather than assuming the source will always be online, the web designer could elect to host the files themselves. The most common file formats are .woff and .woff2.

A sample of the CSS required is below; please refer to the textbook for more details. Do note that these standards have been evolving the past few years.

@font-face {
font-family: 'interRegular';
src: url('Inter-Regular.woff2') format('woff2'),
url('Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

body {
font-family: 'interRegular';
}