CSS Web Fonts

Web fonts allow you to use custom fonts beyond system fonts using @font-face or font services like Google Fonts.

Using Web Fonts

@font-face defines custom font files to load.

Specify multiple formats for browser compatibility.

Google Fonts provides free hosted fonts.

font-display controls how fonts load and render.

Preload fonts for better performance.

/* @font-face definition */
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Use custom font */
body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

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

/* Then use in CSS */
body {
  font-family: 'Roboto', sans-serif;
}

/* Multiple font weights */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-bold.woff2') format('woff2');
  font-weight: 700;
}