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.