Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS @font-face Rule

Posted in CSS Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁️ 15 - Views
⏳ 4 mins
💬 1 Comment
CSS @font-face Rule

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
Copy To Clipboard
@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

ValueDescription
font-familySpecifies the name of the font, which will be used in the font-family property in your CSS rules.
srcSpecifies 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy