<!doctype html>
<html>
<head>
<title>Font family</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<ol>
<li>Default serif</li>
<li>Default sans-serif</li>
<li>Default monospace</li>
<li>Default cursive, you don’t see this much</li>
<li>Default fantasy, maybe don’t do this</li>
<li><em>Futura</em>, on a Mac; <em>Verdana</em>, on a PC</li>
<li>Some Gorton-y <em>National Park</em>, imported from Google Fonts</li>
<li>This will be in <em>Playfair</em>, using @font-face</li>
</ol>
</body>
</html>
index.html
/* Importing from Google Fonts. These have to be at the top! */
@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap');
/* These will depend on your user’s platform and browser. */
li:nth-child(1) { font-family: serif; }
li:nth-child(2) { font-family: sans-serif; }
li:nth-child(3) { font-family: monospace; }
li:nth-child(4) { font-family: cursive; }
li:nth-child(5) { font-family: fantasy; }
/* You can also choose a specific typeface. */
li:nth-child(6) { font-family: 'Futura', 'Verdana', sans-serif; }
/* But the user has to have them installed on their device. */
/* Otherwise it will “fall back” to the next/right value. */
/* The `@import` above lets you use the font on any computer. */
li:nth-child(7) { font-family: 'National Park', sans-serif; }
/* You can also host fonts along with your site files. */
@font-face {
font-family: 'Playfair';
src: url('playfair--regular.woff2') format('woff2');
}
/* And then reference them, as above. */
li:nth-child(8) { font-family: 'Playfair', serif; }
li + li { margin-block-start: 2em }