CSS Google Fonts

CSS @font-face rule

Last Updated : 03 Oct, 2024

The @font-face rule in CSS is used to include custom fonts on web pages. This allows you to use any font without needing it to be installed on the user's device, ensuring that your web design stays consistent with your brand's typography.

By adding custom fonts, you can create unique designs, maintain a strong brand identity, and improve the user experience with visually appealing fonts.

Syntax

@font-face {
  font-family: fontName;
  src: url(fontFile path);
  font-stretch: font-stretch Property;
  font-weight: font-weight Property;
  font-style: font-style Property;
}

Key Properties of the @font-face Rule

Here’s a table of key properties of the @font-face rule:

Property	Description
font-family	Specifies the name of the custom font to be used in the CSS.
src	Defines the location (URL) of the external font file.
font-stretch:	Adjusts whether the font is displayed wider or narrower than its normal width.
font-weight	Sets the weight or thickness of the font (e.g., normal, bold, or specific numerical values like 400, 700).
font-style	Determines whether the text is displayed in normal, italic, or oblique style.

Few hosted font services

These services will provide you with various types of fonts.

CSS @font-face rule Exmples

Here are some examples of CSS font -face rules :

Example 1: Basic Usage

This example illustrates the use of the @font-face rule to specify the different font properties to decorate the text accordingly.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS @font-face rule</title>
    <style>
        @font-face {
            font-family: fontName;
            src: url(sansation_light.woff);
        }

        @font-face {
            font-family: fontName;
            src: url(sansation_bold.woff);
            font-weight: bold;
        }

        div {
            font-family: fontName;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div>A Computer Science Portal for Geeks</div>
    </center>
</body>
</html>

Output:

Example 2: Multiple Font Weights and Styles

This example illustrates the use of the @font-face rule by specifying the source of the file path along with its format.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS @font-face rule</title>
    <style type="text/css">
        @font-face {
            font-family: "OpenSans";
            src: url("/examples/fonts/OpenSans-Regular.eot");
            src: url("/examples/fonts/OpenSans-Regular.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: "OpenSansBold";
            src: url("/examples/fonts/OpenSans-Bold.eot");
            src: url("/examples/fonts/OpenSans-Bold.ttf") format("truetype");
            font-stretch: normal;
            font-weight: normal;
            font-style: normal;
        }

        /* Specify the OpenSans bold font */

        h1 {
            font-family: "OpenSansBold", Arial, sans-serif;
            color: green;
        }

        p {
            font-family: "OpenSans", Arial, sans-serif;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>A Computer Science Portal for Geeks</p>
    </center>
</body>

</html>

Output:

font-face multiple font output

Note: There is 5 Font format those are: TTF/OTF, WOFF, WOFF2, SVG, and EOT.

Browser Supports

The @font-face rule is supported by all major browsers, including:

CSS Google Fonts

S

skyridetim

Improve

Article Tags :

Similar Reads

CSS | @document rule

The CSS @document rule is used to maintain the restriction of the styles in a page or set of pages. This rule makes the styles for specific URLs, suppose the user included 10 URLs on a page and want to styles each of them differently then this rule could be the trump card. The @document rule define

CSS font-family Property

The CSS font-family property specifies the font for an element. It can list multiple fonts as fallbacks. If the browser doesn't support the first font, it tries the next. It includes specific font names like "Arial" and generic families like "serif" or "sans-serif".Types of Font Familyfamily-name: S

CSS | @import rule

The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration. Syntax: @import url|string list-

CSS Google Fonts

CSS Google Fonts is a service by Google that provides a diverse collection of web fonts for free. It allows web developers to easily integrate custom fonts into their websites using CSS. Google Fonts, launched in 2010, is the largest free and open-source font library online, available for personal a

CSS Web fonts allow the use of different fonts, which are not installed on the local system. After choosing the not installed font, just include the font file on the web server and it will be automatically downloaded when needed. Syntax: @font-face { font details}Types of Font Formats: There are man

Tailwind CSS Font Family

This class accepts a lot of font names in tailwind CSS in which all the properties are covered in class form. Â It is the alternative to the CSS font-family property. This class is used to specify the font of an element. It can have multiple fonts as a backup system i.e. if the browser does not suppo

CSS @media Rule

The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation(Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive

Pure CSS Grids with Font-Family

Pure CSS is a framework that can be used as a substitute for Bootstrap. It is an open-source solution that Yahoo developed for building responsive web pages and applications. It aids in creating a better user experience that is highly effective. Pure CSS Grid is the class of this framework that can

CSS font-display property

The CSS font-display property controls how a custom web font is displayed while it's loading. It determines whether to show a fallback font, hide text temporarily, or swap to the custom font once it's fully loaded. Font-display allows customizing how web fonts are displayed when the page is being re

CSS font-style Property

The CSS font-style property is used to style text in a normal, italic, or oblique face from its font family. This property helps to assign importance and decorate specific text, enhancing the overall user experience. The font-style property is an essential tool in CSS for designing and styling text