Font-Face in CSS
Custom fonts are defined by CSS and made available on our web pages via the @font-face rule. To style text components on a web page, web designers can use this rule to embed or link to font files.
The user's device can install the custom font locally or fetch it from a distant server.
Overview
- We may use both local() and url() at the same time. The custom font from the distant server will be utilized as a backup if a local copy is not available and matches.
- Because resources are loaded by browsers according to their declaration-list order, local() should be written before url().
- The methods url() and local() are both optional.
- A rule block is proper if it contains one or more local() functions but not url().
- The less particular font versions should be listed after the more specific font variants.
- By enabling the user to specify their unique fonts, @font-face enables users to move beyond web-safe fonts and eliminate the need for an internet connection.
How to apply CSS @font-face
For fonts hosted on one's servers, "@font-face" is a great option since it enables developers to show a font on a website even in cases when the user does not have the font installed on their machine. The rule tells the browser to get the font file from its host location and then present it in the CSS-specified format. Instead of being limited to using web-safe fonts that consumers have preinstalled on their computers, this enables designers to utilize a wider range of fonts.
Syntax:
The @font-face rule has a simple structure at its core. Since it appears at the start of a stylesheet, the fonts will load first.
The font-family, src, font-strength, font-weight, and font-style factors make up the font-face rule. Below is a discussion of these descriptions' roles.
@font-face {
font-family: fontName;
src: url(fontFile path);
font-stretch: font-stretch Property;
font-weight: font-weight Property;
font-style: font-style Property;
}
Parameters
Four parameters can be used with the @font-face rule, as explained below:
font-family: This property indicates an element's font. This is a necessary description.
src: This retains the file path (URL) and is used to define the location (URL) of the external resource. Its value is a list of locally installed font face names or external references ordered by comma. The user agent cycles through the list of references whenever a typeface is required, selecting the first one it can activate. The user agent loads the next font in the list and ignores fonts with incorrect data or local font faces that cannot be located.
font-stretch: Use font-stretch to adjust the text's width and height.
font-weight: This property is used to specify the font's weight or thickness when used with HTML text.
font-style: The value defined by the font-style descriptor will be utilized to match styles to certain faces.
Possible values:
- normal
- italic
- oblique
The default value is normal.
Note: There is 5 Font format those are: TTF/OTF, WOFF, WOFF2, SVG, and EOT.
Example 1: This example shows how to declare the various font characteristics to decorate the text according to the @font-face rule.
<html>
<head>
<style>
@font-face {
font-family: "Calibri Font";
src: url("font/Calibri.woff");
}
body {
font-family: "Calibri Font", Calibri;
}
</style>
</head>
<body>
<h2>@font-face at-rule</h2>
<p>This is called as Calibri Font.</p>
</body>
</html>
Output
Example 2: By indicating the file path's source and format, this example demonstrates how to utilize the @font-face rule.
<html lang="en">
<head>
<title>Example for CSS @font-face rule</title>
<style type="text/css">
@font-face {
font-family: "Italic";
src: url("/examples/fonts/TimesNewRoman-Regular.eot");
src: url("/examples/fonts/TimesNewRoman-Regular.ttf") format("truetype");
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "TimesNewRomanBold";
src: url("/examples/fonts/TimesNewRoman-Bold.eot");
src: url("/examples/fonts/TimesNewRoman-Bold.ttf");
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
/* Specifying the TimesNewRoman bold font */
h1 {
font-family: "TimesNewRomanBold", Arial, Times New Roman-serif;
color: blue;
}
p {
font-family: "Times New Roman", Arial, Times New Roman-serif;
}
</style>
</head>
<body>
<center>
<h1>Welcome</h1>
<p>Let's start now</p>
</center>
</body>
</html>
Output
Impact on outcomes
A boring website looks better with web fonts. Performance issues arise because the custom fonts must be downloaded before they can be shown.
Before the downloaded fonts could be utilized, the fallback fonts were first loaded.
But until the special font loads by default, the browsers conceal the content.