Skip to main content

CSS Fonts

CSS (Cascading Style Sheets) provides a variety of font properties that can be used to style and customize text on a web page

The font-size​

This property sets the size of the font. It can be specified in pixels (px), ems (em), or other units.

As an example:

h1 {
     font-size: 32px;
}

The font-weight​

This property sets the weight (or boldness) of the font. It can be set to values such as normal, bold, or a numeric value between 100 and 900.

As an example:

p {
     font-weight: bold;
}

The font-style​

This property sets the style (such as italic or oblique) of the font.

As an example:

em {
     font-style: italic;
}

The text-transform​

This property specifies how text should be capitalized. It can be set to values such as uppercase, lowercase, or capitalize.

As an example:

h2 {
     text-transform: uppercase;
}

Why Font Selection is Important​

  • Font selection is an important aspect of web design.
  • A well-chosen font can enhance readability, convey tone, and contribute to visual appeal.
  • The font should be legible at different sizes and not strain the eyes of the reader.
  • The font should match the tone and style of the content.
  • Accessibility is an important consideration.

Generic Font Families​

Generic font families are categories of fonts that share common characteristics and can be used as fallback options when a specific font is not available.

The five generic font families in CSS are:

  • serif: Fonts that have small lines or flourishes at the ends of characters, such as Times New Roman or Georgia.

  • sans-serif: Fonts that do not have small lines or flourishes at the ends of characters, such as Arial or Helvetica.

  • monospace: Fonts in which all characters have the same width, such as Courier or Consolas. These fonts are often used for programming or code content.

  • cursive: Fonts that have a flowing, handwriting-like style, such as Comic Sans or Brush Script.

  • fantasy: Fonts that have decorative or stylized designs, such as Impact or Jokerman.

The CSS font-family Property​

The CSS font-family property is used to specify the font(s) that should be used for the text content of an HTML element. The value of the font-family property can be a comma-separated list of font names, with the first font being the preferred choice and subsequent fonts used as fallback options.

As an example:

p {
     font-family: "Open Sans", Arial, sans-serif;
}

In this example:

  • The font family for paragraphs (<p>) is set to "Open Sans".
  • If "Open Sans" is not available, the browser will try to use Arial.
  • If Arial is also not available, it will fall back to any other sans-serif font that is available on the user's device.

Font Shorthand​

The font shorthand property is used to set multiple font-related properties in a single declaration. Instead of setting font-size, font-family, font-weight, font-style, and other font-related properties separately, the font shorthand property can be used to set them all at once.

As an example:

p {
     font: italic 1.2em "Open Sans", Arial, sans-serif;
}

In this example:

  • The font style is set to italic, the font size is set to 1.2em, and the font family is set to "Open Sans".
  • If "Open Sans" is not available, the browser will try to use Arial.
  • If Arial is also not available, it will fall back to any other sans-serif font that is available on the user's device.

CSS Google Fonts​

Google Fonts is a free web font service that provides a collection of over 1000 fonts that can be used on websites.

To use Google Fonts follow these steps:

  • Choose a font from the Google Fonts website that you want to use on your website.
  • Click on the "+ Select this style" button next to the font you want to use.
  • Once you have selected the font, click on the "Use" button in the bottom right corner.
  • Choose the styles and character sets that you want to include in your font download.
  • Copy the HTML code and the CSS code provided by Google Fonts.
  • Paste the HTML code in the <head> section of your HTML document.
  • Paste the CSS code in your CSS file or between <style> tags in your HTML document.

As an example:

Editor

Loading...

In this example:

  • We are using the "Open Sans" font from Google Fonts.
  • We first link to the Google Fonts CSS file in the <head> section of our HTML document.
  • Then, we set the font-family property of the body element to 'Open Sans', sans-serif. If "Open Sans" is not available, the browser will use any other sans-serif font that is available on the user's device.

CSS Font Pairings​

Choosing the right font pairings can greatly enhance the readability and visual appeal of your website.

Here are some great font pairings that you can use in your CSS:

  • Open Sans and Lato: These two fonts are both sans-serif and have a similar geometric shape, making them a great pairing for modern and minimalist designs.

  • Montserrat and Merriweather: Montserrat is a bold and geometric sans-serif font that pairs well with the more traditional serif font Merriweather, which has a classic and elegant look.

  • Roboto and Noto Serif: Roboto is a popular sans-serif font that has a clean and modern look, while Noto Serif is a serif font that has a timeless and elegant style.

  • Raleway and Playfair Display: Raleway is a thin and elegant sans-serif font that pairs well with the more decorative serif font Playfair Display, which has a classic and sophisticated look.

  • Source Sans Pro and Source Serif Pro: These two fonts are part of the same family, designed to work together seamlessly. Source Sans Pro is a sans-serif font with a clean and modern look, while Source Serif Pro is a serif font with a classic and elegant style.