CSS Web Fonts

Web fonts allow a website to use fonts that may not be installed on the visitor's device. The browser downloads the required font files when the webpage loads.

Web fonts help you:

• Create a consistent design across devices
• Match fonts with your brand
• Use more font styles than standard system fonts
• Improve the visual appearance of headings and buttons

Using an Online Font Service

Online font services provide ready-to-use font files and CSS. You normally add a <link> element inside the HTML <head>:

<link rel="preconnect" href="https://fonts.example.com">
<link rel="stylesheet" href="https://fonts.example.com/css?family=Roboto">

You can then use the font in CSS:

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

If Roboto cannot load, the browser tries Arial and then the default sans-serif font.

Using the @font-face Rule

The @font-face rule lets you load a font file from your own website.

@font-face {
  font-family: "MyWebFont";
  src: url("fonts/my-web-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

You can now apply it like any other font:

h1 {
  font-family: "MyWebFont", sans-serif;
}

The main properties are:

• font-family – gives the font a name for use in CSS
• src – provides the location and format of the font file
• font-weight – identifies its thickness
• font-style – identifies whether it is normal or italic

Loading Different Font Weights

Each font weight may require a separate file:

@font-face {
  font-family: "MyWebFont";
  src: url("fonts/regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "MyWebFont";
  src: url("fonts/bold.woff2") format("woff2");
  font-weight: 700;
}

The browser selects the correct file automatically:

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

Font Formats

Common web-font formats include:

• WOFF2 – modern, compressed, and widely supported
• WOFF – useful as a fallback for older browsers
• TTF – supported but often larger
• OTF – supports advanced typography features

For most modern websites, WOFF2 is the preferred format because its smaller file size can improve loading speed.

Controlling Font Loading

The font-display property controls how text appears while the font downloads:

@font-face {
  font-family: "MyWebFont";
  src: url("fonts/my-web-font.woff2") format("woff2");
  font-display: swap;
}

With swap, the browser displays a fallback font first and replaces it when the web font is ready. This prevents invisible text during loading.