Skip to main content

Font Family

Font Family​

The font-family property is used to specify the font family for the text content of an element. It allows you to define a prioritized list of font families to be used for rendering the text. If the first font is not available, the browser will try the next one in the list, and so on.

Example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Font Style</title>
    <style>
      .text {
        font-family: cursive;
      }
    </style>
  </head>

  <body>
    <h1>Normal Text</h1>
    <h1 class="text">Font-Family Example</h1>
  </body>
</html>

Output :

output-11

Different Types of Font-Families​

In CSS, there exist five fundamental font families, each with distinct characteristics:

Serif Fonts: These fonts exhibit small strokes at the edges of each letter, evoking a sense of formality and elegance.

Sans-serif Fonts: Characterized by clean lines without small strokes, these fonts convey a modern and minimalistic aesthetic.

Monospace Fonts: In this category, all letters share the same fixed width, creating a mechanical and structured appearance.

Cursive Fonts: Designed to imitate human handwriting, cursive fonts bring a personalized touch to text.

Fantasy Fonts: These decorative and playful fonts add a touch of whimsy and creativity to text.

Example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Font Style</title>
    <style>
      .text {
        font-family: serif;
      }
      .text-1 {
        font-family: sans-serif;
      }
      .text-2 {
        font-family: monospace;
      }
      .text-3 {
        font-family: cursive;
      }
      .text-4 {
        font-family: fantasy;
      }
    </style>
  </head>

  <body>
    <h1>Normal Text</h1>
    <h1 class="text">Font-Family Example</h1>
    <h1 class="text-1">Font-Family Example</h1>
    <h1 class="text-2">Font-Family Example</h1>
    <h1 class="text-3">Font-Family Example</h1>
    <h1 class="text-4">Font-Family Example</h1>
  </body>
</html>
>

Output :

output-12

Importing Fonts using the Google Fonts​

Step 1: Go to https://fonts.google.com/ else search Google Fonts on web.

output-13

Visit the Google Fonts website to explore and select the fonts you want to use.

output-15

Step 2: Select the font and click on"Get Font".

output-15

Step 3: Then click on"Get embed code".

output-15

Step 4: You can use Google Fonts in two ways: with a <link> tag OR using @import.Both Give Same Output📌

🔴By Using link
copy the link and CSS class for variable style.

output-16

Paste the link into the head and use the CSS class for variable style in any division or tag you want to apply the Font to.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:[email protected]&display=swap"
      rel="stylesheet"
    />
  </head>

  <style>
    .text {
      font-family: "Edu NSW ACT Cursive", cursive;
      font-optical-sizing: auto;
      font-weight: weight;
      font-style: normal;
    }
  </style>

  <body>
    <p class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque excepturi
      ipsa iure deserunt ex voluptates. Ratione voluptatum consequuntur nulla
      fuga corporis atque tenetur dolorem at autem, officiis, magni totam ab.
    </p>
  </body>
</html>

OR​

🔴By Using @import.
another common way to use Google Fonts is by importing them directly in CSS instead of adding a <link> in HTML.. copy the url and CSS class for a variable style

output-16

Paste the @import URL inside the <style> tag ( or for external CSS, you can directly add the @import link in the external CSS file ), use the CSS class for variable style in any division or tag you want to apply the Font to.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    @import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:[email protected]&display=swap");
    .text {
      font-family: "Edu NSW ACT Cursive", cursive;
      font-optical-sizing: auto;
      font-weight: weight;
      font-style: normal;
    }
  </style>
  <body>
    <p class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque excepturi
      ipsa iure deserunt ex voluptates. Ratione voluptatum consequuntur nulla
      fuga corporis atque tenetur dolorem at autem, officiis, magni totam ab.
    </p>
  </body>
</html>

Output

output-17