CSS @font-face Property
The CSS @font-face property is a versatile feature that enables you to include custom fonts on your web pages. This allows you to utilize fonts that are not installed on the user's machine, so your website's typography appears uniform on various devices and platforms.
Purpose:
To include custom fonts on a webpage.
To utilize fonts that are not installed on the user's system.
To improve the visual appearance and branding of a website.
Example:
@font-face {
font-family: 'YourCustomFontName';
src: url('path/to/your/font.woff2') format('woff2'),
url('path/to/your/font.woff') format('woff'),
url('path/to/your/font.ttf') format('truetype');
font-weight: normal; /* or bold, 100, 200, etc. */
font-style: normal; /* or italic */
font-display: swap; /* or auto, block, fallback, optional */
}
Explanation of Properties:
font-family:
Specifies the name you will use to identify the font in your CSS.
Select a descriptive and unique name.
src:
Specifies the path to your font files.
You can specify multiple font formats (e.g., WOFF2, WOFF, TTF) to make sure that you're compatible with a variety of browsers.
format():
Assists the browser in understanding what kind of font is being loaded.
font-weight:
Specifies the weight of the font (e.g., normal, bold, 100, 200, …, 900).
font-style:
Defines the font style (e.g., normal, italic, oblique).
font-display:
Regulates the way the font is rendered as it loads.
swap: The text is rendered in a fallback font until the custom font is loaded, then it's replaced.
block: A brief invisible block time. If the font doesn't load within this time, the fallback font is rendered.
fallback: Extremely brief invisible block time. Extremely brief swap time.
optional: The browser determines whether or not to download the font.
auto: The browser employs its default font-display policy.
Example Usage:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
url('fonts/MyCustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
h1{
font-family:'MyCustomFont',sabs-serif;
}
p{
font-family:'MyCustomFont',serif;
}
Important Considerations:
Font Formats:
Employ new font formats such as WOFF2 for best performance and browser support.
Offer backup formats such as WOFF and TTF for legacy browsers.
Font Licensing:
Make sure you possess the requisite licenses to deploy the fonts on your site.
Font Optimization:
Optimize your font files so that they become smaller in size and load faster.
Utilize font subsets so that you use only the characters that you require.
Font Hosting:
Host your fonts on your own server or make use of a font hosting service such as Google Fonts or Adobe Fonts.
Performance: Having many large font files can make your site slow. Attempt to minimize the number of custom fonts.
English
Arabic
Français
Português
Deutsch
Türkçe
Dutch
Italiano
Russian
Romaian