CSS @font-face Rules

You are Here:


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.


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>


Using CSS

@font-face{ font-properties }

Property Value

The following table provides a list of values to be used inside @font-face rule.

font-familyRequiredSpecifies a name that will be used as the font face value for font properties.
font-styleRequiredSpecifies a font-style value.
font-displayOptionalDetermines how a font face is displayed based on whether and when it is downloaded and ready to use.
font-feature-settingsOptionalAllows control over advanced typographic features in OpenType fonts.
font-variation-settingsOptionalAllows low-level control over OpenType or TrueType font variations.
srcOptionalSpecifies the resource containing the font data.
unicode-rangeOptionalSpecifies the range of Unicode code points to be used from the font.


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.

Share this Page

Meet the Author