With HTML fonts, you can give text on your web pages an in­di­vidu­al 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­nic­ally 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­at­ively impacts read­ab­il­ity. Problems can also occur if an HTML font is not installed on the computer of the person visiting your site.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

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­sist­ently 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­ib­il­ity.

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­ise your website’s design without affecting com­pat­ib­il­ity. 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­spons­ive web design and fonts, we take a closer look at the func­tion­al­ity and ad­vant­ages 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­sidered outdated. It’s now re­com­men­ded to manage fonts using CSS.

<font>

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

Attribute Value De­scrip­tion
color Colour name, hex color code, or RGB values Specifies the colour 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 spe­cific­a­tions for the entire document. Its at­trib­utes 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 colour 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 colour:

<!DOCTYPE html>
<html>
<head>
<title>Font colour</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.

Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup
Go to Main Menu