CSS Web Fonts

❮ Previous Next ❯

The CSS @font-face Rule

Web fonts enable web designers to use fonts that aren't already installed on the user's computer.

Once you've picked the font you like and obtained it, place the font file on your website. This way, it will be fetched and saved on the user's device when required.

Your special fonts are defined in the CSS code using the @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a kind of font that was made in the late 1980s by Apple and Microsoft. It's the most commonly used font style for both Mac OS and Microsoft Windows

OpenType Fonts (OTF)

OpenType is a type of computer font format. You can adjust its size as you like. It's built upon something called TrueType, and Microsoft has the rights to it. Nowadays, you can spot OpenType fonts on almost every computer.

The Web Open Font Format (WOFF)

WOFF is a special kind of font made for websites. It was invented in 2009 and is approved by W3C. WOFF is similar to OpenType or TrueType fonts, but it's crafted to be smaller so that websites load faster, and it includes additional details. The main goal is to simplify the process of sending fonts from a web server to a user's device, especially when the internet connection is not very speedy.

The Web Open Font Format (WOFF 2.0)

We use a font named TrueType/OpenType. It compresses more efficiently compared to WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow you to display text in a unique manner using SVG. In the SVG 1.1 guidelines, there is a section that explains how to create fonts within SVG documents. Additionally, you can apply CSS to SVG documents, and the @font-face rule can be used to style text within SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are small OpenType fonts made by Microsoft. They're meant to be used as embedded fonts on websites.

Using The Font You Want

In HTML, if you want to use a special font with the @font-face rule, you must first give the font a name, such as "myFirstFont." Then, you should tell the browser where to find the font file, including its width and height if those details are provided.

Tip: Remember to use small letters for the font web address. Uppercase letters can give unexpected results in IE.

To choose a particular font for an HTML element, you need to specify the font's name (myFirstFont) in the font-family property like this:

Using Bold Text

You have to make a fresh @font-face rule with instructions to make text look thicker or bolder.

The "sansation_bold.woff" file is a font file that contains the bold characters of the Sansation font.

This file also contains the bold letters of the Sansation font, and it is named "sansation_bold.woff."

Web browsers use this rule to make text appear bold when the 'myFirstFont' font-family is chosen.

You can use this technique to make several rules for a single font without any problem. Simply create multiple @font-face rules.

CSS Font Descriptors

Here is a list of font characteristics you can specify within the @font-face rule:

Descriptor	Values	Description
font-family	name	Mandatory. Specifies a title for the font.
src	URL	Needed. Specifies the web address of the font file.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Describes the stretching of the font. The default setting is 'normal'.
font-style	normal italic oblique	Optional. Describes the desired style for the font. The default setting is 'normal'.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Describes the desired style for the font. The default setting is 'normal'.
unicode-range	unicode-range	Optional. Specifies the range of UNICODE characters that the font can display. The default setting is 'U+0-10FFFF'.

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

      * {
        font-family: myFirstFont;
      }
    </style>
  </head>
  <body>
    <h1>The @font-face Rule</h1>
    <div> With CSS, websites can use fonts other than the pre-selected "web-safe" fonts. </div>
  </body>
</html>

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

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

      * {
        font-family: myFirstFont;
      }
    </style>
  </head>
  <body>
    <h1>The @font-face Rule</h1>
    <div> With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>. </div>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid