With HTML fonts, you can give text on your web pages an in­di­vid­ual touch. For the best possible user-friend­li­ness, 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 tech­ni­cal­ly 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 par­tic­u­lar, 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 neg­a­tive­ly impacts read­abil­i­ty. 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 per­for­mance 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 con­sis­tent­ly 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 com­pat­i­bil­i­ty.

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 ty­po­graph­ic styles. One popular provider of web fonts is Google Fonts. Using web fonts allows you to per­son­al­ize your website’s design without affecting com­pat­i­bil­i­ty. 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 re­spon­sive web design and fonts, we take a closer look at the func­tion­al­i­ty and ad­van­tages 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 in­tro­duc­tion of HTML5, both tags are con­sid­ered outdated. It’s now rec­om­mend­ed to manage fonts using CSS.

<font>

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

Attribute Value De­scrip­tion
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 spec­i­fi­ca­tions for the entire document. Its at­trib­ut­es are identical to those of the <font> tag. The syntax is:

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

The following example il­lus­trates 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 in­tro­duc­tion of HTML5, the two tags mentioned above have fallen out of use. However, it’s still possible to define HTML fonts according to your pref­er­ences. 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 Reg­is­tra­tion
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private reg­is­tra­tion for more privacy
  • Free Domain Connect for easy DNS setup
Go to Main Menu