Working with Web Fonts

You can use an online service to find web fonts and generate web font code, for example:

Serif vs Sans-serif fonts:

Understanding the Basics of Fonts in CSS

Font Classification

Fonts are classified into the following generic font families:

Serif Fonts: Fonts with small lines at the ends of characters (e.g., Times New Roman).
Sans-serif Fonts: Fonts without these lines (e.g., Arial, Helvetica).
Monospace Fonts: Each character takes up the same amount of space (e.g., Courier New).
Cursive Fonts: Fonts with a handwritten or slanted style (e.g., Comic Sans MS).
Fantasy Fonts: Decorative fonts (e.g., Impact).

Font Basics in CSS

The font-family property is used to specify the font for the text within an element. Fonts are typically defined by specifying a generic font family, a system font, or a web font.

Basic Font Declaration Syntax

selector {
    font-family: "Font Name", fallback-font, generic-font;
}

css

selector: The CSS selector (e.g., body, h1, .class, #id, etc.).
font-family: The CSS property used to specify the font.

You can define a list of font names, which is helpful if a user’s system doesn’t have the first font. CSS will try each font in the list in order until it finds one available on the user’s system.

body {
    font-family: "Helvetica", "Arial", sans-serif;
}

css

In the example above:

"Helvetica" is the preferred font.
If "Helvetica" is unavailable, the browser will try "Arial".
If neither font is available, the browser will fall back to the generic sans-serif font.

Generic Font Families

CSS has a set of generic font families ↗ that can be used as fallbacks:

serif: Fonts with small lines or extensions at the end of the strokes (e.g., Times New Roman).
sans-serif: Fonts without serifs (e.g., Arial).
monospace: Fonts where each character takes up the same width (e.g., Courier New).
cursive: Fonts that resemble handwritten or calligraphic styles (e.g., Comic Sans MS).
fantasy: Decorative fonts (e.g., Impact).

Using Web Safe Fonts

Web-safe fonts are fonts that are commonly installed on most devices. These include fonts like Arial, Times New Roman, and Courier New. Because these fonts are ubiquitous, you can safely use them in web design without worrying about compatibility.

Example with Web-Safe Fonts:

body {
  font-family: 'Times New Roman', serif;
}

css

Web-safe fonts ensure consistent typography across different platforms, as they are available on most operating systems. However, relying solely on web-safe fonts can limit your design choices, which is why custom fonts are often preferred.

Custom Fonts with `@font-face`

If you want to use a specific font that may not be available on the user’s device, you can use the @font-face rule to load a custom font from a URL or local file.

Syntax:

@font-face {
  font-family: 'MyCustomFont';
  src: url('path-to-font.woff2') format('woff2'),
       url('path-to-font.woff') format('woff');
}

css

font-family: The name you want to assign to your custom font.
src: Specifies the location of the font file.

Example:

@font-face {
  font-family: 'OpenSans';
  src: url('/assets/fonts/OpenSans-Regular.woff2') format('woff2'),
       url('/assets/fonts/OpenSans-Regular.woff') format('woff');
}

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

css

This method ensures that the font will be downloaded from the server and used across all browsers, as long as the font files are properly hosted.

Google Fonts Integration

Google Fonts is a free and open-source collection of fonts that can be easily integrated into your website. The fonts are optimized for fast loading and can be added to your website using a <link> tag in the <head> section.

Steps:

Visit Google Fonts ↗ and choose a font.
Copy the <link> tag provided.
Paste the <link> tag into the <head> section of your HTML document.
Use the font in your CSS.

Example:

Link to Google Fonts in HTML:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

html

Use the font in CSS:

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

css