CSS @font-face Rule

Posted in CSS Tutorial

Updated on Aug 21, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @font-face rule in CSS is a powerful feature that allows web developers to load custom fonts on their websites.

With @font-face, you can specify a custom font file to be used on your web pages, ensuring a consistent and unique typographic experience for your users, regardless of the fonts installed on their devices.

💡 Syntax

The basic syntax of the @font-face rule includes defining the font family name and the path to the font file. Here's the general structure:

Syntax

Copied

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
}

🎛️ Default Value

The @font-face rule itself does not have a default value. However, if the custom font is not loaded or supported, the browser will fall back to the next available font in the font stack specified in the font-family property of the CSS rule.

🏠 Property Values

Value	Description
font-family	Specifies the name of the font, which will be used in the font-family property in your CSS rules.
src	Specifies the path to the font file(s). It can include multiple formats to ensure broader browser compatibility.
format	(Optional) Specifies the font format such as woff2, woff, truetype, opentype, etc. This helps the browser determine which file to use.

📄 Example

In this example, we'll load a custom font called "MyCustomFont" and apply it to the body of the webpage.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @font-face Example</title>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('fonts/MyCustomFont.woff2') format('woff2'),
           url('fonts/MyCustomFont.woff') format('woff');
    }

    body {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Using a Custom Font with @font-face</h1>
  <p>This text is displayed using a custom font called "MyCustomFont".</p>
</body>
</html>

🖥️ Browser Compatibility

The @font-face rule is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It has been a part of CSS for many years, making it a reliable choice for using custom fonts on your website.

🎉 Conclusion

The @font-face rule is an essential tool for web developers who want to create a unique and consistent typographic experience on their websites.

By allowing the use of custom fonts, it provides greater flexibility and creativity in web design. Make sure to provide multiple font formats to ensure compatibility across different browsers and devices, and enjoy the enhanced control over your website's typography.