![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS @font-face Rule
![CSS @font-face Rule](https://codetofun.com/wp-content/themes/codetofun/images/large/css-font-face.webp)
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:
@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.
<!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:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
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
If you have any doubts regarding this article (CSS @font-face Rule), please comment here. I will help you immediately.