CSS Web Fonts

Subject: css

CSS Web Fonts

CSS Web Fonts allow developers to use custom fonts on a website that are not installed on the user's device. This is achieved using the @font-face rule or by importing fonts from external services like Google Fonts.

Why Use Web Fonts?

  • Consistent typography across all devices and browsers
  • More design options than system-default fonts
  • Easy to integrate with a single line of code

1. Using Google Fonts (Recommended Method)

Steps:

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

Example:

🚀 Try it in Compiler

2. Using @font-face to Host Fonts Locally

You can download font files (.woff, .woff2) and reference them directly using @font-face.

Example:

🚀 Try it in Compiler

✅ Ensure font files are correctly placed in the specified folder path (e.g., fonts/).

Fallback Fonts

Always specify fallback fonts in case the web font fails to load:

🚀 Try it in Compiler

Font Formats

  • .woff2: Preferred for modern browsers (best compression)
  • .woff: Widely supported and backward compatible
  • .ttf, .otf, .eot: Legacy formats, mostly outdated

Performance Tips

  • Prefer .woff2 for smaller file size and faster load
  • Only load the weights and styles you need
  • Use display=swap in Google Fonts to avoid render-blocking
  • Self-host fonts for full control and performance optimization

Key Takeaways

  • CSS web fonts allow custom typography across browsers and devices
  • Google Fonts offers an easy and reliable integration method
  • @font-face provides complete control by self-hosting fonts
  • Always include fallback fonts for reliability
  • Use modern font formats and optimize for performance
Next: CSS Box Model