CSS @font-face Rules
You are Here:
Demo
In this demo, the font-family used is downloaded from googlefonts.
This is a sentence.
CSS @font-face Rules
CSS @font-face rule specifies a custom font with which to display text.
Note: In the @font-face rule you must first define a name for the font (e.g. googleFont), and then point to the font file.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
@font-face {
font-family: googleFont;
src: url("/Sofia-Regular.ttf");
}
h1 {
font-family: googleFont;
}
</style>
</head>
<body>
<h1>CSS @font-face Rule</h1>
</body>
</html>
Syntax
Using CSS
@font-face{
font-properties
}
Property Value
The following table provides a list of values to be used inside @font-face rule.
| Value | Type | Explanation |
|---|---|---|
| font-family | Required | Specifies a name that will be used as the font face value for font properties. |
| font-style | Required | Specifies a font-style value. |
| font-display | Optional | Determines how a font face is displayed based on whether and when it is downloaded and ready to use. |
| font-feature-settings | Optional | Allows control over advanced typographic features in OpenType fonts. |
| font-variation-settings | Optional | Allows low-level control over OpenType or TrueType font variations. |
| src | Optional | Specifies the resource containing the font data. |
| unicode-range | Optional | Specifies the range of Unicode code points to be used from the font. |
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
