Languages
[Edit]
EN

CSS - font-family

0 points
Created by:
Elias999
489

In this article, we would like to show you how to use font-family property in CSS.

Quick solution:

div {
  font-family: Arial;
}

multiple: 

div {
  font-family: Arial, sans-serif, "Helvetica Neue";
}

 

Introduction

The font-family property is used to set the font for an element. You can specify multiple font names because if the browser doesn't support the first font from the list, it tries the next one.

The fonts:

  • should be specified in the correct order, starting from the one you want the browser to try first and so on,
  • they should be separated by a comma,
  • if a font name contains white space, it has to be quoted.

Practical example

In the example below, we specify three different font styles for div elements.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .verdana {
      font-family: Verdana;
    }
    
    .arial {
      font-family: Arial;
    }

    .courier {
      font-family: "Courier New";
    }



  </style>
</head>
<body>
  <div class="verdana">example text...</div>
  <br/>
  <div class="arial">example text...</div>
  <br/>
  <div class="courier">example text...</div>
  <br/>
  <div class="no-font">example text...</div>
</body>
</html>

Multiple fonts

In this example, we combine the fonts from the previous section in the order we want them to be displayed. If the browser doesn't support Courier New, it will try to use Arial, then Verdana, etc.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .my-element {
      font-family: "Courier New", Arial, Verdana, Helvetica;
    }

  </style>
</head>
<body>
  <div class="my-element">example text...</div>
  <br/>
  <div class="no-font">example text...</div>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join