Web Fonts using CSS

CSS | Web fonts: In this tutorial, we are going to learn how to use web fonts in HTML using CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on November 28, 2019

CSS | Web fonts

Web fonts allow people to use fonts that are not pre-installed in their computers. When you want to include a particular font simply include the font file on your browser and it will be downloaded.

Your fonts are specified within the CSS @font-face rule.

In this rule firstly specify the name of the font you wish to use and point to the font file.

Different web font formats

TrueType Fonts(TTF):
This is a standard font developed by Apple and Microsoft in the late 1980s. TrueType is the most commonly used font format for both the Mac OS and Microsoft Windows operating systems.
OpenType fonts(OTF):
This is a format for scalable computer fonts developed by Microsoft. OpenType fonts are widely used today on the major computer platforms.
Web Open Font Format (WOFF):
It is a font format for use in web pages. It was developed in 2009. This font format is essentially OpenType or TrueType with compression and additional metadata. Its goal is to support font distribution between a server and a client over a network with bandwidth constraints.
SVG Fonts/Shapes:
These fonts allow SVG to be used as glyphs when displaying text. You can also apply CSS to SVG documents and to the SVG documents text the @font-face rule can be applied.
Embedded OpenType Fonts (EOT):
EOT fonts designed by Microsoft are a compact form of OpenType fonts used as embedded fonts on web pages.

Syntax:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

Note: Always use lower case letters for font url.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        @font-face {
            font-family: myFirstFont;
            src: url(sansation_light.woff);
        }
        
        * {
            font-family: myFirstFont;
        }
    </style>
</head>

<body>
    <div>
        This is a web font i wish to include in my browser.
    </div>
</body>

</html>

Output

In the above example, a sansation_light web font is used. In location, we have specified the direct location of the font as it was in our folder that contained the main file you need to use the correct location of the file of the font to add it to your website. Using a direct URL is also possible.

CSS Font Descriptors

font-family: It is used to define the name of the font you wish to use.
src: It is used to specify the URL of the web font.
font-stretch: It is used to specify how to font should be stretched. Some values are normal, condensed, ultra-condensed, etc.
font-style: It is used to specify the style you wish to use for the font. There are three values: normal, italic and oblique.
font-weight: It is used to define the boldness of the font used. Its values are normal and bold.

CSS Tutorial & Examples »

Creating dropdown in CSS

Media Queries in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples