CSS Fonts

❮ Previous Next ❯

Selecting the correct font for your website is crucial!

Font Selection is Important

Selecting the correct font greatly affects how website visitors perceive it.

Choosing the correct font can help establish a powerful image for your brand.

It's essential to choose a font that people can easily read. The font you choose makes your text better. Also, make sure to select the right color and size for your text.

The CSS font-family Property

In CSS, we use the font-family property to choose the font of a text.

Note: If you have a font name with more than one word, you should put it in quotes, for example: "Times New Roman"

Tip:The font-family property should have multiple font names. This is like a backup plan to make sure your text looks good on different web browsers and operating systems. You should begin with the specific font you prefer. After that, you should list some general font families. These general ones act as a safety net in case the preferred font isn't available. Separate the font names with commas. This way, the browser can pick a similar font from the general list if it can't find the preferred font.

CSS Web Safe Fonts

Web-safe fonts are fonts that work on all web browsers and devices without any problems.

Fallback Fonts

However, it's important to know that there are no fonts that work perfectly for all web browsers. Sometimes, a font might not be available or might not be set up correctly.

Hence, it's crucial to consistently employ substitute fonts.

In the font-family property, include a list of backup fonts. If the first font doesn't work, the browser will automatically try the next one in the list, and so on. Make sure to finish the list with a common font name.

CSS Font Style

The font-style property is commonly used to make text look slanted, like it's leaning to one side.

Property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Font Weight

The font-weight property tells us how bold or light a font appears.

Font Variant

The font-variant property tells us if text should appear in small capital letters or not.

When you use a small-caps font, it turns all the small letters into big ones. But, these converted big letters look smaller than the regular big letters in the text.

CSS Font Size

The font-size attribute controls how big or small the text appears on the screen.

Remember to use the correct HTML tags when creating content. For headings, use <h1> - <h6> for headings and <p> for paragraphs.

The font size can either be an exact size or a size that depends on something else.

Absolute size:

Changes the text to a specific size.
Prevents users from adjusting the text size in any web browser (not good for accessibility).
Absolute size is handy when you already know the exact physical size of the content.

Relative size:

Adjusts the text size based on nearby elements.
Enables users to modify text size in web browsers.

Set Font Size With Pixels

Using pixels to set the text size allows you to have complete control over how big or small the text appears on your webpage.

Set Font Size With Em

In websites, some developers use 'em' instead of 'pixels' for text size. This helps users change text size in the browser menu.

1em is the same as the font size you see right now. Most browsers start with a default text size of 16 pixels. So, when you see 1em, it means 16 pixels.

You can figure out the size in "em" by dividing the number of pixels by 16. This is done using the formula: pixels/16 = em.

Use a Combination of Percent and Em

To make sure your website looks good on all web browsers, you can set a default font size in percentage for the<body> element:

Responsive Font Size

You can adjust the text size using the "vw" unit, which stands for "viewport width."

In this way, the text will adjust its size according to the size of the web browser window.

Hello World

Change the size of your internet browser's window to observe how the text's font size adjusts accordingly.

CSS Google Fonts

If you don't like the usual fonts in HTML, you can use Google Fonts..

Google Fonts are available for free, and they offer over 1000 different fonts for you to pick from.

How To Use Google Fonts

Simply include a link to a unique style sheet in the part of your HTML document, and then mention this font in your CSS.

Use Multiple Google Fonts

To use more than one Google font, just write the font names with a vertical bar character (|) in between, like this:

CSS Font Property

You can make your code shorter by putting all the different font settings into one property.

The font property is a way to make text look different in various ways:

font-style
font-variant
font-weight
font-size/line-height
font-family

Note: The text says that you must have both font-size and font-family values. If any of the other values are not there, then the default values will be used.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .p1 {
        font-family: "Times New Roman", Times, serif;
      }

      .p2 {
        font-family: Arial, Helvetica, sans-serif;
      }

      .p3 {
        font-family: "Lucida Console", "Courier New", monospace;
      }
    </style>
  </head>
  <body>
    <h1>CSS font-family</h1>
    <p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
    <p class="p2">This is a paragraph, shown in the Arial font.</p>
    <p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-family: Tahoma, Verdana, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>CSS Fallback Fonts</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        font-style: normal;
      }

      p.italic {
        font-style: italic;
      }

      p.oblique {
        font-style: oblique;
      }
    </style>
  </head>
  <body>
    <h1>The font-style property</h1>
    <p class="normal">This is a paragraph in normal style.</p>
    <p class="italic">This is a paragraph in italic style.</p>
    <p class="oblique">This is a paragraph in oblique style.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        font-weight: normal;
      }

      p.light {
        font-weight: lighter;
      }

      p.thick {
        font-weight: bold;
      }

      p.thicker {
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <h1>The font-weight property</h1>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        font-variant: normal;
      }

      p.small {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h1>The font-variant property</h1>
    <p class="normal">My name is Hege Refsnes.</p>
    <p class="small">My name is Hege Refsnes.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        font-size: 40px;
      }

      h2 {
        font-size: 30px;
      }

      p {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        font-size: 2.5em;
        /* 40px/16=2.5em */
      }

      h2 {
        font-size: 1.875em;
        /* 30px/16=1.875em */
      }

      p {
        font-size: 0.875em;
        /* 14px/16=0.875em */
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Setting the font size in "em" helps all main web browsers adjust the text size. However, there's an issue with older versions of Internet Explorer (IE) where resizing the text may result in it becoming larger or smaller than intended.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-size: 100%;
      }

      h1 {
        font-size: 2.5em;
      }

      h2 {
        font-size: 1.875em;
      }

      p {
        font-size: 0.875em;
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Setting the font size using percentage and em ensures consistent display size across major browsers. It also enables text resizing in all browsers.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <body>
    <h1 style="font-size:10vw;">Responsive Text</h1>
    <p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
    <p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
    <p>The viewport is like the size of your internet browser window. Imagine the browser window is 50cm wide. In that case, 1vw (viewport width) is equal to 0.5cm.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
    <style>
      body {
        font-family: "Sofia", sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Sofia Font</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>123456790</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
    <style>
      h1.a {
        font-family: "Audiowide", sans-serif;
      }

      h1.b {
        font-family: "Sofia", sans-serif;
      }

      h1.c {
        font-family: "Trirong", serif;
      }
    </style>
  </head>
  <body>
    <h1 class="a">Audiowide Font</h1>
    <h1 class="b">Sofia Font</h1>
    <h1 class="c">Trirong Font</h1>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.a {
        font: 20px Arial, sans-serif;
      }

      p.b {
        font: italic small-caps bold 12px/30px Georgia, serif;
      }
    </style>
  </head>
  <body>
    <h1>The font Property</h1>
    <p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
    <p class="b">This paragraph is styled with an italic, small-caps, and bold font. The font size is 12 pixels, the line height is 30 pixels, and the font family is Georgia.</p>
  </body>
</html>