Introduction to @font-face
Using the @font-face directive gives you the ability to add custom fonts to your website. This way, without needing to rely on the default system fonts, you can change your text's appearance and enhance your website's design.
Why Use @font-face?
By using @font-face, you can add diverse and unique fonts to your website, allowing designers to improve the visual impression left on users. This topic is especially important for branding and creating a unique visual presence.
How to Define @font-face
Defining a font using @font-face is quite simple. It’s enough to insert the font address into the CSS code and assign a name to it. Below, you will observe an example of how to define it.
Key Points
When using @font-face, keep in mind that you should use files in different formats. This work is due to better compatibility across different browsers. Typically, the formats that should be used include .woff, .woff2, and .ttf.
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
Line-by-Line Breakdown
@font-face {
This line begins the definition of the custom font.
font-family: 'MyCustomFont';
A name is assigned to the custom font which will be used later.
src: url('fonts/MyCustomFont.woff2') format('woff2'),
This specifies the font file's address and its format. This format (woff2) is used for better performance in many browsers.
url('fonts/MyCustomFont.woff') format('woff');
The woff format is used for fallback for browsers that do not support woff2.
font-weight: normal;
This sets the weight (thickness) of the font to normal.
font-style: normal;
This sets the font style (such as italic) to normal.
}
This marks the end of the @font-face directive.
body {
This sets the styling rules for the body element.
font-family: 'MyCustomFont', Arial, sans-serif;
This specifies that the body should start with the custom font and, if it's not available, fallback to Arial or system fonts.