5. Fonts in CSS

Web safe fonts

Web safe fonts are typefaces that come pre-installed as default fonts on the majority of computers and devices, regardless of operating system.
Using a web safe font gives you the best chance of having your text appear as intended.

Here are some examples of web safe fonts:

  • Arial: A sans-serif font
  • Verdana: A sans-serif font
  • Tahoma: A sans-serif font that's bolder than Arial and has less space between characters
  • Trebuchet MS: A sans-serif font designed by Vincent Connare in 1996 for Microsoft
  • Times New Roman: A serif font
  • Georgia: A serif font
  • Garamond: A classical font with a timeless look that's often used in printed books
  • Courier New: A monospace font
  • Brush Script MT: A cursive font
  • DejaVu Sans: A font that's known for its legibility on screen and in print

Font Family 

The font family property specifies the font stack.

  • This is used to set the preferred font for the text content.
  • We can define multiple font family names separated by commas based on priority.

Syntax:

selector{
      font-family: font1, font2, font3;
}

Example:

<html lang="en">
<head>
    <style>
        h1{
            font-family: 'Courier New', Courier, monospace;
        }
        h2{
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <h1>CodeWithHarry</h1>
    <h2>Hello World</h2>
</body>
</html>

Font-Family.png

Generic Font family

  • There are five generic font family names that serve as fallback options when specific fonts are not available:
    1. serif: generic serif fonts (like Times New Roman).
    2. sans-serif: generic sans-serif fonts (like Arial or Helvetica).
    3. monospace: generic monospaced fonts (like Courier New).
    4. cursive: generic cursive fonts (for handwritten styles).
    5. fantasy: generic fantasy fonts (for decorative styles).

Tip: It is recommended to end the font family with any of these generic font family names.

Custom fonts

To use custom fonts, we will be using Google Fonts.

Follow the steps:

  1. Go to https://fonts.google.com/
  2. Select your preferred font.
  3. Choose the fonts based on font weight.
  4. Copy the import link and paste it on the top of the stylesheet.
  5. Copy the font family and paste it wherever you want to use it.

Font Style

The font style property sets the style of the font.

  • There are three types of font styles: italic, normal, and oblique.
    1. italic: Italic texts are slightly to the right.
    2. normal: Default text style.
    3. Oblique: Oblique is similar to italic but has less bend

Example:

<html lang="en">
<head>
    <style>
        [[p1]] {
            font-style: italic;
        }
        [[p2]] {
            font-style: normal;
        }
        [[p3]] {
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p id="p1">font-style: italic</p>
    <p id="p2">font-style: normal</p>
    <p id="p3">font-style: oblique</p>
</body>
</html>

Font-Style.png

Font Color

Defines the colour of the text or typography.

  • Syntax:
selector{
    color: red;
}

For an in-depth explanation of colours, follow the CSS Color Tutorial.

Font size

The font size property sets the size of the fonts.

  • It has some predefined sizes, such as small, medium, large, larger, etc.
  • The most commonly used units for font size are px (pixels), em (ems), rem (root ems), and percentage (%).
    1. px: px is the absolute unit. This is useful for setting precise sizes.
    2. em: em is the relative unit, based on the font size of the parent element. If the element's font size is 1.5 em, that means the element will be 1.5 times the size of the parent.
    3. rem: rem is the relative unit, based on the font size of the root element, i.e., <html>.

Example:

<html lang="en">
<head>
    <style>
        [[p1]] {
            font-size: small;
        }
        [[p2]] {
            font-size: medium;
        }
        [[p3]] {
            font-size: large;
        }
        [[p4]] {
            font-size: larger;
        }
        [[p5]] {
            font-size: 25px;
        }
        [[p6]] {
            font-size: 2em;
        }
        [[p7]] {
            font-size: 2rem;
        }
        [[p8]] {
            font-size: 50%;
        }
    </style>
</head>
<body>
    <p id="p1">font-size: small</p>
    <p id="p2">font-size: medium</p>
    <p id="p3">font-size: largr</p>
    <p id="p4">font-size: larger</p>
    <p id="p5">font-size: 25px</p>
    <p id="p6">font-size: 2em</p>
    <p id="p7">font-size: 2rem</p>
    <p id="p8">font-size: 50%</p>
</body>
</html>

Font-Size.png

Font Variant

The CSS font variant property helps to toggle with the variations of the text.

  • There are two common values for the font-variant property.
    1. normal: The default value.
    2. small-caps: This value renders the text in small capital letters.

Example:

<html lang="en">
<head>
    <style>
        [[p1]] {
            font-variant: normal;
        }
        [[p2]] {
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <p id="p1">font-variant: normal;</p>
    <p id="p2">font-variant: small-caps;</p>
</body>
</html>

Font-Varient.png

Font Weight

The font-weight property controls the thickness or boldness of the text.

  1. The values range from 100 (thin) to 900 (ultra-bold).
  2. Also have some predefined values such as lighter, bold, and bolder.

Example:

<html lang="en">
<head>
    <style>
        [[p1]] {
            font-weight: 100;
        }
        [[p2]] {
            font-weight: 200;
        }
        [[p8]] {
            font-weight: 800;
        }
        [[p9]] {
            font-weight: 900;
        }
        [[p10]] {
            font-weight: lighter;
        }
        [[p11]] {
            font-weight: bold;
        }
        [[p12]] {
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <p id="p1">font-weight: 100</p>
    <p id="p2">font-weight: 200</p>
    <p id="p8">font-weight: 800</p>
    <p id="p9">font-weight: 900</p>
    <p id="p10">font-size: lighter</p>
    <p id="p11">font-size: bold</p>
    <p id="p12">font-size: bolder</p>
</body>
</html>

Font-Weight.png