CSS Web Fonts

Web Fonts allow you to use fonts that are not installed on the user's computer. This gives you total creative control over the typography of your website.

1. Using Google Fonts

Google Fonts is the most popular way to add custom fonts. You simply include a link tag in your HTML and reference the font in your CSS.

/* HTML Header */
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

/* CSS */
h1 {
    font-family: 'Lobster', cursive;
}

2. The @font-face Rule

If you have your own font file (e.g., .woff2, .ttf), you can hosting it yourself using the @font-face rule.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/my-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

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

Font Weights and Styles

When importing fonts, make sure to include the specific weights (300, 400, 700) you need to keep your page load fast without missing styles.