HTML Font Family

Introduction

When the developer designs the web page, then typography plays an important role. It will increase the overall user experience by influencing the readability aesthetics. One of the most fundamental aspects of HTML web page design is choosing the font family. In this article, we are going to learn about the HTML font family.

What is HTML Font Family?

It is a group of fonts that has a common design. In a font family, all the fonts differ from each other in style, such as the weight (light, normal, bold, semi-bold, etc. It is also different in slant, like Roman or upright, italic, and oblique. Suppose we take the most common font family like Times New Roman, which consists of a Roman, italic, bold, and bold italic version of the same typeface. These are also essential to maintain consistency and ensure that your web content appears as intended on different devices and browsers. These also provide the fallback option for the specific font content which are not available.

Common Font Families

There are so many common font families available on the internet. These font families are used very much by the developer.

1. Serif Fonts:

These are characterized by the small decorative lines or "serifs" at the ends of letter strokes. These fonts are considered the more formal and traditional fonts. Some of the most common serif fonts are Times New Roman, Georgia, and Baskerville. Let us see an example of a serif fort.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Define a CSS rule for text using a serif font */
  body {
    font-family: "Times New Roman", Times, serif;
  }
</style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
  <p>This is some sample text using a serif font.</p>
</body>
</html>

Output:

Explanation:

In the above example we use the font-family property in CSS to specify the font for the <body> element and, by extension, all the text within the body of the HTML document. We've specified a generic serif font as a fallback option, followed by specific serif font families like "Times New Roman" and "Times." The browser will use the first available font in the list, so it will try to use "Times New Roman" and fallback to "Times" or any other generic serif font if those are not available.

2. Sans-Serif Fonts:

It lacks these decorative lines, resulting in a cleaner and more modern look. Some examples of this font are Arial, Helvetica, and Roboto. Let us see an example of a serif fort.

Example 2:

<!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>
<body>
 <h1>Sans Serif Fonts</h1>
<p>This is an example of a sans serif font: <span style="font-family: Arial;">This is Arial font</span></p>
<p>This is another example of a sans serif font: <span style="font-family: Helvetica;">This is Helvetica font</span></p>
</body>
</html>

Output:

Explanation:

This code will create a web page with a heading and two paragraphs. The first paragraph will have the text "This is an example of a sans serif font" in Arial font. The second paragraph will have the text "This is another example of a sans serif font" in Helvetica font.

The <span> tag is used to define a span of text. The font-family attribute of the <span> tag specifies the font family of the text. In this case, we are using the Arial and Helvetica font families.

3. Monospace Fonts:

It will allocate the same horizontal space for each character, making them ideal for code blocks and typewriter-style text. Examples of some monospace fonts are Courier New and Consolas. Let's see an example of a monospace fort.

Example 3:

<!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>
<body>
 <h1>Monospace Fonts</h1>
 <p>This is an example of a monospace font: <span style="font-family: 'Consolas', monospace;">This is Consolas font</span></p>
 <p>This is another example of a monospace font: <span style="font-family: 'Courier New', monospace;">This is Courier New font</span></p>
</body>
</html>

Output:

Explanation:

This code will create a web page with a heading and two paragraphs. The first paragraph will have the text "This is an example of a monospace font" in Consolas font. The second paragraph will have the text "This is another example of a monospace font" in Courier New font.

The <span> tag is used to define a span of text. The font-family attribute of the <span> tag specifies the font family of the text. In this case, we are using the 'Consolas' and 'Courier New' font families.

4. Cursive Fonts

This font has a flow of mimic handwriting and also provides a decorative appearance for the web page. The developer has used this product for creative and artistic purposes. Let us see an example of a cursive fort.

Example 4:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
    font-family: 'cursive';
  }
</style>
</head>
<body>
 <h1>Welcome to <span style="font-style: italic;">javaTpoint</span></h1>
</body>
</html>

Output:

Explanation:

In the above code, we have created the <style> section in the <head> of the HTML document to define the CSS styles. Then we have to set The font-family property is set to 'cursive', which will use the default cursive font available in the user's system. Then, Inside the <body>, we have an <h1> element with the text "Welcome to javaTpoint". We also use inline CSS to set the <span> element containing "World!" to have an italic font style.

5. Fantasy Fonts

This font will encompass a wide range of artistic and decorative styles. The developer will use this sparingly for special design accents rather than body text. Some example of fantasy font is Papyrus and Impact. Let us see an example of a fantasy font.

Example 5:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Fantasy Font Example</title>
 <style>
   body {
     font-family: 'fantasy';
   }
 </style>
</head>
<body>
 <h1>Welcome to the <span style="font-style: italic;">Fantasy World!</span></h1>
</body>
</html>

Output:

Explanation:

In the above code, We include a <style> section in the <head> of the HTML document to define the CSS styles. Then have to set The font-family property to 'fantasy', which will use the default fantasy font available in the user's system. Then, Inside the <body>, we have an <h1> element with the text "Welcome to the Fantasy World!" where "Fantasy World!" is styled in a fantasy font. Again, keep in mind that the actual fantasy font used will depend on the user's system and browser settings. If we have a specific fantasy font that you want to use, then we can specify its name in the font-family property instead of 'fantasy'. Additionally, we can use CSS properties like font style, font size, and font weight to further customize the appearance of your text.

6. System Fonts:

These types of fonts are preinstalled in the user's system. These fonts also offer good cross-compatibility. Some examples of system fonts are Arial, Helvetica, and Times New Roman. Let us see an example of a system font.

Example 6:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>System Font Example</title>
 
</head>
<body>
 <p>This text will use the system's default font.</p>
</body>
</html>

Output:

Explanation:

In this example, the text within the <p> element will be displayed using the default font that the user's operating system and browser have configured. This allows our web content to seamlessly integrate with the user's system preferences for font rendering.

7. Google Fonts:

It is the most popular web service that provides a large collection of free, web-safe fonts that can be easily integrated into your HTML documents. It also allows us to specify custom font families, giving you more control over your website's typography. , let us see an example for Google font.

To use Google Fonts in our program, we have to follow the steps below.

First, we have to Go to the Google Fonts website (https://fonts.google.com/).
Then we have to Search for a font you like. Let's say you choose the "Roboto" font.
Then we have to click on the "+" button next to the font you want to use. It will be added to your selection.
Once you've selected the font(s) you want to use, scroll down to the "Embed" section on the right sidebar.
Then, we have to Copy the HTML <link> tag provided in the "Embed" section and paste it into the <head> section of your HTML document.
Now, we can then apply the font to specific elements in your HTML using CSS. Here's an example:

Example 7:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Google Font Example</title>
  
  <!-- Include the Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  
  <!-- Apply the Google Font to a CSS class -->
  <style>
    .custom-font {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
 <h1 class="custom-font">This text uses the Roboto font from Google Fonts.</h1>
  <p class="custom-font">Welcome to javaTpoint</p>
</body>
</body>
</html>

Output:

Explanation:

In the above code, we have included the Google Font "Roboto" by adding a <link> tag to the Google Fonts URL in the <head> section. Then, We defined a CSS class called .custom-font and applied the 'Roboto' font family to it. Then We use the .custom-font class to style the <h1> and <p> elements in the HTML. The output text inside these elements will be displayed using the "Roboto" font from Google Fonts. We can also replace "Roboto" with any other Google Font you like by changing the font name in both the <link> tag and the CSS rule.

Best Practices for Font Families in Web Design

We need to remember some things before providing the font families to the web page. These are as follows.

Choose Readable Fonts:

We have to choose a font which has more readability than aesthetics. We also have to ensure that the font we have chosen is easy to read, especially for body text.

Limit Font Varieties:

We don't have to use too many fonts for our web page. It is not a best practice. If we do this, it can make your website appear chaotic and unprofessional. We have to choose a few fonts for a cohesive design.

Provide Fallbacks:

We always have to choose the font families that provide the guarantee that our content remains legible even if the preferred font isn't available.

Consider Web Font Services:

The best practice is to choose the services from Google Fonts, Adobe Fonts, and Typekit, which offer a wide selection of web-friendly fonts. These services can handle font hosting and compatibility, making it easier to use custom fonts.

Test Across Devices and Browsers:

After choosing the font families, we have to test our font families on various devices and browsers to ensure that they are working perfectly.

Use Font Weights and Styles:

We also have to use Leverage font weights (e.g., bold, italic) and styles (e.g., normal, oblique), which emphasize text and create a visual hierarchy.

Next TopicHTML Slider

← prev next →