CSS Web Fonts

Fonts play a huge role in web design and user experience. A well-chosen font makes a website look professional, modern, and easy to read. But not all devices have the same fonts installed. That’s where Web Fonts come in.

Web fonts allow developers to use custom fonts on websites that work across all browsers, even if the user doesn’t have that font installed on their system.

Using @font-face

The @font-face rule lets you load a custom font directly from your server. You provide the font file (e.g., .woff2, .ttf) and define how it should be used.

@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/MyCustomFont.woff2") format("woff2"),
       url("fonts/MyCustomFont.ttf") format("truetype");
}

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

Using Google Fonts

Google Fonts is the most popular way to add fonts to a website. It’s free, easy to use, and optimized for performance.

Example: Adding Google Fonts

Go to Google Fonts
Select a font (e.g., Roboto)
Copy the <link> tag into your HTML <head>

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

The CSS @font-face Rule

The @font-face rule is used to define custom fonts. You provide a name for the font (via font-family) and point to the font file using src. Once defined, you can use that font anywhere in your stylesheet.

Example:

@font-face {
  font-family: "MyFirstFont";
  src: url("fonts/myFirstFont.woff2") format("woff2"),
       url("fonts/myFirstFont.ttf") format("truetype");
}

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

Different Font Formats

Different browsers support different font formats. To ensure cross-browser compatibility, developers usually provide multiple font file types.

TrueType Fonts (TTF)

Developed by Apple and Microsoft in the late 1980s.
One of the most widely supported formats across Windows and macOS.

Example file: OpenSans.ttf

@font-face {
  font-family: 'OpenSans';
  src: url('OpenSans.ttf') format('truetype');
}

OpenType Fonts (OTF)

Built on top of TrueType with advanced typography features.
Supports ligatures, glyphs, and multiple languages.
Commonly used in modern operating systems.

Example file: Roboto-Regular.otf

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.otf') format('opentype');
}

Web Open Font Format (WOFF)

Specifically designed for the web.
A compressed version of TTF/OTF with metadata.
Recommended by the W3C and widely supported in browsers.

Example file: Lato-Regular.woff

@font-face {
  font-family: 'Lato';
  src: url('Lato-Regular.woff') format('woff');
}

Web Open Font Format 2.0 (WOFF2)

Improved compression compared to WOFF 1.0.
Smaller file sizes = faster website loading.
Supported in all major modern browsers.

Example file: Montserrat.woff2

@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat.woff2') format('woff2');
}

SVG Fonts

Uses SVG shapes for font rendering.
Rarely used today, mostly for older iOS devices.

Example file: IconFont.svg

@font-face {
  font-family: 'MyIconFont';
  src: url('IconFont.svg#MyIconFont') format('svg');
}

Embedded OpenType (EOT)

Proprietary format by Microsoft.
Required for older versions of Internet Explorer (IE 6–8).

Example file: Verdana.eot

@font-face {
  font-family: 'Verdana';
  src: url('Verdana.eot'); /* Old IE support */
}

Using Bold and Italics with @font-face

If your font has multiple weights (regular, bold, italic), you need to define separate @font-face rules for each style.

Example:

@font-face {
  font-family: "MyFirstFont";
  src: url("fonts/myFirstFont-Regular.woff2");
  font-weight: normal;
}

@font-face {
  font-family: "MyFirstFont";
  src: url("fonts/myFirstFont-Bold.woff2");
  font-weight: bold;
}

CSS Font Descriptors

Inside @font-face, you can use several descriptors:

Descriptor	Values	Description
`font-family`	Custom name (e.g., `"MyFont"`)	Defines the font name (required).
`src`	URL to font file(s)	Defines where the font is loaded from (required).
`font-stretch`	normal, condensed, expanded, etc.	Defines how the font should be stretched.
`font-style`	normal, italic, oblique	Defines the font style.
`font-weight`	normal, bold, 100–900	Defines the font thickness.
`unicode-range`	e.g., `U+0-5FF`	Defines which characters are supported.

Google Fonts

If you don’t want to host fonts yourself, Google Fonts is the easiest solution. It offers 1,400+ free fonts optimized for the web.

Example: Adding Google Fonts

In HTML:

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

In CSS:

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