Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to define the location of a font for download in CSS
The @font-face rule is used to define custom fonts for web pages by specifying the location of font files for download. This allows you to use fonts that are not installed on the user's system.
Syntax
@font-face {
font-family: "font-name";
src: url("path/to/font.woff2") format("woff2"),
url("path/to/font.woff") format("woff");
}
Key Properties
| Property | Description |
|---|---|
font-family |
Defines the name you'll use to reference this font |
src |
Specifies the location and format of the font file |
font-weight |
Defines which font weight this declaration applies to |
font-style |
Defines which font style this declaration applies to |
Example: Basic Font Face Declaration
The following example shows how to define a custom font and use it in your webpage −
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "CustomFont";
src: url("https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2") format("woff2");
}
.custom-text {
font-family: "CustomFont", Arial, sans-serif;
font-size: 24px;
color: #2c3e50;
padding: 20px;
}
</style>
</head>
<body>
<p class="custom-text">This text uses a custom downloaded font</p>
<p style="font-family: Arial, sans-serif; font-size: 24px; color: #2c3e50; padding: 20px;">This text uses Arial (system font)</p>
</body>
</html>
The first paragraph displays with the custom downloaded font, while the second paragraph shows in Arial for comparison. The custom font appears more refined and distinctive.
Example: Multiple Font Formats
For better browser compatibility, you can specify multiple font formats −
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "WebFont";
src: local("Helvetica Neue"),
url("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2"),
url("https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.web-font-text {
font-family: "WebFont", sans-serif;
font-size: 20px;
line-height: 1.5;
color: #34495e;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="web-font-text">
<h2>Custom Web Font Example</h2>
<p>This content is displayed using a custom web font loaded from an external source.</p>
</div>
</body>
</html>
A heading and paragraph are displayed using the custom Roboto font. The browser will try local fonts first, then download the web font if needed.
Conclusion
The @font-face rule enables you to use custom fonts by specifying their download location. Always provide fallback fonts and consider using multiple formats for better browser support.
Updated on: 2026-03-15T11:52:27+05:30
159 Views
Advertisements