How to Add Custom Fonts to Your Website Using CSS @font-face

How to Add Custom Fonts to Your Website Using CSS @font-face

Want your website to stand out with a unique typographic voice? You don’t have to rely solely on Google Fonts. With @font-face, you can embed any custom font directly into your site — giving you full control over your brand’s identity.

Let’s break down how @font-face works and how you can use it in real-world projects.

What is @font-face?

@font-face is a CSS rule that allows you to define custom fonts and use them just like system or web-safe fonts. Unlike Google Fonts, it doesn’t require external APIs — the font is served directly from your own server or CDN.

What You’ll Need

• The font file (usually .woff or .woff2, sometimes .ttf or .otf)

• Basic knowledge of HTML and CSS

• A web server or local development setup

Step-by-Step: How to Use @font-face

1. Add the Font Files to Your Project

Let’s say you have a font called CustomFont.woff2. Place it inside a folder like this:

/fonts/CustomFont.woff2

2. Add the @font-face Rule to Your CSS

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

3. Apply the Font in Your Styles

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

That’s it! Your website will now load and render using the custom font.

Best Practices & Tips

• Use .woff2 as your primary format — it’s compressed, web-optimized, and widely supported.

• Always include a fallback font (like sans-serif) for safety.

• Keep font file sizes small for faster load times — under 100KB is ideal.

• Use a font-display strategy if needed:

font-display: swap;

This improves perceived performance and avoids invisible text on slow networks.

Optional: Add Multiple Weights or Styles

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

You can define different @font-face blocks for regular, bold, italic, etc.

🌐 Browser Compatibility

Good news: @font-face is supported in all modern browsers — even Internet Explorer 9+.

Licensing Reminder

Only use custom fonts you’re legally allowed to host on your site. Look for:

• Open Font License (OFL)

• SIL license

• Fonts marked as "self-hosting allowed" or "free for commercial use"

Final Thoughts

Custom fonts give your website a unique personality and better brand consistency. With @font-face, you’re no longer limited to third-party libraries — your design, your server, your rules.

Go ahead, make your typography as bold as your vision.