With HTML fonts, you can give text on your web pages an individual touch. For the best possible user-friendliness, you should always use web-safe fonts.

Which HTML fonts are available?

In theory, there is a huge number of different HTML fonts. As HTML itself does not provide a font, you can technically use any font for your web pages as long as you upload and configure it correctly. However, there are various problems that could arise if you do this. In particular, ornate or small fonts are often not rendered as desired. This not only has a negative effect on the design of the pages, but also negatively impacts readability. Problems can also occur if an HTML font is not installed on the computer of the person visiting your site.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

Web-safe HTML fonts

If you’re looking for suitable fonts for your website, you should use web-safe fonts. These are pre-installed on most systems or available as web fonts via public servers. This ensures that there are no problems with rendering and that your website is displayed consistently in different browsers and operating systems.

Web-safe fonts

Web-safe fonts are those that are pre-installed on most devices and operating systems. The best-known web-safe fonts include:

  • Arial
  • Courier New
  • Helvetica
  • Times New Roman
  • Georgia
  • Verdana

These fonts are widely used and offer a high level of compatibility.

Web fonts

In addition to pre-installed fonts, you can also use web fonts. Web fonts are loaded from public servers and offer a large selection of typographic styles. One popular provider of web fonts is Google Fonts. Using web fonts allows you to personalize your website’s design without affecting compatibility. Below is an example of how to include a web font:

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <p>This is a text that uses the Roboto web font.</p>
</body>
</html>
html
Tip

In our article on responsive web design and fonts, we take a closer look at the functionality and advantages of web fonts.

Which tags are available for using HTML fonts?

There are two HTML tags that can be used for fonts on web pages: <font> and <basefont>. However, since the introduction of HTML5, both tags are considered outdated. It’s now recommended to manage fonts using CSS.

<font>

The tag <font> is used to select and define HTML fonts. You can use various HTML attributes to define the color, size and font. These are the attributes and their permitted values:

Attribute Value Description
color Color name, hex color code, or RGB values Specifies the color of the text
size Numeric value from 1 to 7 Defines the size of the HTML fonts
face Name of the HTML fonts Specifies the desired HTML font family

The syntax of <font> is as follows:

<font size=" " color=" " face=" "> ....</font>
html

The following code example shows the use of the tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<font size="3" color="0000FF" face="arial, sans-serif">
This is an example text.
</font>
</body>
</html>
html

<basefont>

The <basefont> tag operates similarly. It sets the HTML font family and its specifications for the entire document. Its attributes are identical to those of the <font> tag. The syntax is:

<basefont size=" " color=" " face=" "> ....</font>
html

The following example illustrates font markup with the <basefont>tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<basefont size="3" color="0000FF" face="arial, sans-serif">
This is an example text.
</font>
</body>
</html>
html

How to specify font size, font color and HTML fonts family

Since the introduction of HTML5, the two tags mentioned above have fallen out of use. However, it’s still possible to define HTML fonts according to your preferences. For example, here’s how to set font sizes in HTML:

<!DOCTYPE html>
<html>
<head>
<title>Font size</title>
</head>
<body>
<font size = "1">The font size is = "1"</font><br />
<font size = "2">The font size is = "2"</font><br />
<font size = "3">The font size is = "3"</font><br />
<font size = "4">The font size is = "4"</font><br />
<font size = "5">The font size is = "5"</font><br />
<font size = "6">The font size is = "6"</font><br />
<font size = "7">The font size is = "7"</font>
</body>
</html>
html

Here’s how to specify font color:

<!DOCTYPE html>
<html>
<head>
<title>Font color</title>
</head>
<body>
<font color = "#008080">This text is petrol.</font><br />
<font color = "#8B0000">This text is dark red.</font>
</body>
</html>
html

Here’s how to select an HTML fonts family:

<!DOCTYPE html>
<html>
<head>
<title>HTML fonts family</title>
</head>
<body>
<font face = "Lucida Console" size = "5">Lucida Console</font><br />
</body>
</html>
html

If a website visitor does not have the specified HTML font family installed, a default font will be displayed instead.

Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private registration for more privacy
  • Free Domain Connect for easy DNS setup
Was this article helpful?
Go to Main Menu