CSS Fonts

Choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.


CSS Font Families & Font Faces

  • Font Families : It refers to a group of fonts that share a similar design or style. When setting the font-family property in CSS, you specify the font or list of fonts to be used for rendering text.

  • Font Faces : It refers to defining and using custom fonts in CSS through the @font-face rule. This rule allows you to specify a font family name and provide the font files

Example :

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/myfont.woff2') format('woff2');
}

h1 {
  font-family: 'CustomFont', sans-serif; /* Use the custom font with a fallback */
}


CSS font types

When working with fonts in CSS, there are various font file extensions to consider depending on browser support and font types.


TrueType Font (TTF)

Extension .ttf. Standard font format developed by Apple and Microsoft. Supported by most browsers and widely used for web fonts.

Example

@font-face {
  font-family: 'MyFont';
  src: url('path/to/myfont.ttf') format('truetype');
}


OpenType Font (OTF)

Extension .otf An extension of TrueType font format, often used for similar purposes. Supported by most modern browsers.

Example

@font-face {
  font-family: 'MyFont';
  src: url('path/to/myfont.otf') format('opentype');
}


Web Open Font Format (WOFF)

Extension .woff. Compressed font format specifically designed for web use. Widely supported and recommended for web fonts due to its smaller file size.

Example

@font-face {
  font-family: 'MyFont';
  src: url('path/to/myfont.woff') format('woff');
}


Web Open Font Format 2 (WOFF2)

Extension .woff2. A more modern and improved version of WOFF, providing better compression. Preferred format for web fonts, especially for performance optimization.

Example

@font-face {
  font-family: 'MyFont';
  src: url('path/to/myfont.woff2') format('woff2');
}


Generic Font Families

These are general categories of fonts that the browser will use as a fallback if the specified font is unavailable. Common generic font families include:

  • serif : Fonts with decorative strokes at the ends of characters.

    • Times New Roman

    • Georgia

    • Garamond

  • sans-serif : Fonts without those decorative strokes.

    • Arial

    • Verdana

    • Tahoma

    • Trebuchet MS

  • monospace : Fonts where each character occupies the same amount of horizontal space.

    • Courier New

  • cursive : Fonts that mimic handwriting.

    • Brush Script MT

  • system-ui : The system-ui value for the font-family property in CSS is a keyword that represents the user interface font of the operating system.


What is CSS Fallback Fonts?

However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly. Therefore, it is very important to always use fallback fonts. This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

Example

p {
    font-family: Tahoma, Verdana, sans-serif;
}


CSS Font Individual Components

  • font-style : Controls the italicization or slant of the font.

    • normal

    • italic

    • oblique

  • font-variant : Controls the use of small capitals for text.

    • normal

    • small-caps

  • font-weight : Determines the thickness or boldness of the font.

    • normal

    • bold

    • bolder

    • lighter

    • 100 to 900

  • font-size : Sets the size of the font.

    • 12px

    • 1.5em

    • 2rem

    • small

    • medium

    • large

  • line-height : Determines the amount of vertical space between lines of text.

    • Length values

    • Unitless values

    • normal


  • font-family : Defines the preferred font(s) for the text.


Example

h1 {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
  font-family: 'Arial', sans-serif;
}


CSS Multiple Font Faces use rule

The @font-face rule allows you to define multiple font faces or font variations for custom fonts. This rule is particularly useful when you want to use different font weights, styles, or formats within the same font family.


The Wrong Way

/* DON'T NAME FONT FAMILIES LIKE THIS */
@font-face {
  font-family: 'Roboto Light Italic';
  src: url('Roboto-LightItalic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('Roboto-Bold-webfont.woff') format('woff');
}

/* THIS IS A LITTLE AWKWARD */
em {
  font-family: 'Roboto Light Italic', serif;
}

strong {
  font-family: 'Roboto Bold', serif;
}


The Right Way

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-LightItalic-webfont.woff') format('woff');
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Bold-webfont.woff') format('woff');
  font-style: bold;
  font-weight: 700;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  /* ... */
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;  /* Or 700 */
}
Share