CSS Custom Fonts

What Are Custom Fonts?

Custom fonts let you use any font (like Google Fonts or your own files) in your website using CSS — so your design looks consistent across devices.

1. Using Google Fonts

• Step 1: Link the font in your HTML

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

• Step 2: Use the font in CSS

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

This will apply the Poppins font to the whole page.

2. Using @font-face (Self-Hosted Fonts)

• Step 1: Upload your font files (.woff, .ttf, etc.)
• Step 2: Declare the font in CSS

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

• Step 3: Apply it

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

Font Fallbacks

• Always add a fallback font in case the custom font doesn’t load:
• font-family: 'Open Sans', Arial, sans-serif;