HTML - Fonts Reference

Hello, aspiring web developers! Today, we're going to dive into the wonderful world of HTML fonts. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Remember, just like choosing the right outfit for a special occasion, selecting the perfect font can make your web page look stunning!

Syntax

Let's start with the basics. In HTML, we use the <font> tag to specify the font face, size, and color of text. However, it's important to note that this tag is deprecated in HTML5, which means it's no longer recommended for use. But don't worry! We'll learn about it for historical context and then explore modern alternatives.

The basic syntax looks like this:

<font face="font_family" size="size" color="color">Text goes here</font>

HTML font Tag

Now, let's break down the <font> tag attributes:

face: This specifies the font family.
size: This sets the size of the font. It can range from 1 (smallest) to 7 (largest).
color: This determines the color of the text.

Here's an example:

<font face="Arial" size="5" color="blue">Welcome to my website!</font>

This will display "Welcome to my website!" in Arial font, size 5, and blue color.

Web safe fonts

Web safe fonts are fonts that are commonly available across different operating systems. Using these ensures that your text appears as intended for most users. Here's a table of some popular web safe fonts:

Font Name	Example
Arial	The quick brown fox jumps over the lazy dog
Verdana	The quick brown fox jumps over the lazy dog
Helvetica	The quick brown fox jumps over the lazy dog
Times New Roman	The quick brown fox jumps over the lazy dog
Courier	The quick brown fox jumps over the lazy dog

Example of HTML Fonts

Let's put our knowledge into practice with a fun example:

<html>
<head>
    <title>My Favorite Fruits</title>
</head>
<body>
    <h1><font face="Arial" color="red">My Favorite Fruits</font></h1>
    <p><font face="Verdana" size="4" color="green">Apples are delicious!</font></p>
    <p><font face="Courier" size="3" color="orange">Oranges are juicy!</font></p>
    <p><font face="Times New Roman" size="5" color="purple">Grapes are sweet!</font></p>
</body>
</html>

In this example, we've created a page about favorite fruits. Each fruit is described using a different font, size, and color. This demonstrates how you can use fonts to create visual hierarchy and emphasis in your web pages.

Fonts for Microsoft Systems

Microsoft systems come with a variety of pre-installed fonts. Here are some popular ones:

Arial
Calibri
Cambria
Georgia
Tahoma
Times New Roman

Fonts for Macintosh Systems

Macintosh systems also have their own set of default fonts:

Helvetica
Arial
Times New Roman
Courier
Verdana
Georgia

Fonts for Unix Systems

Unix systems, including Linux distributions, often include these fonts:

DejaVu Sans
Liberation Sans
FreeSans
Nimbus Sans L

Now, I know what you're thinking: "But teacher, you said the <font> tag is deprecated. What should we use instead?" Great question! In modern web development, we use CSS (Cascading Style Sheets) to style our text. Here's a quick example:

<html>
<head>
    <title>Modern Font Styling</title>
    <style>
        h1 {
            font-family: Arial, sans-serif;
            color: red;
        }
        .green-text {
            font-family: Verdana, sans-serif;
            font-size: 18px;
            color: green;
        }
        .orange-text {
            font-family: 'Courier New', monospace;
            font-size: 16px;
            color: orange;
        }
        .purple-text {
            font-family: 'Times New Roman', serif;
            font-size: 20px;
            color: purple;
        }
    </style>
</head>
<body>
    <h1>My Favorite Fruits</h1>
    <p class="green-text">Apples are delicious!</p>
    <p class="orange-text">Oranges are juicy!</p>
    <p class="purple-text">Grapes are sweet!</p>
</body>
</html>

This achieves the same result as our previous example, but uses modern CSS techniques instead of the deprecated <font> tag.

Remember, choosing the right font is like picking the perfect spice for your dish - it can make your web page pop! But always consider readability first. A fancy font might look cool, but if your users can't read it, it's not doing its job.

As we wrap up, I want to share a little story. When I first started web development, I got so excited about fonts that I used a different one for every paragraph on my page. It looked like a ransom note! Learn from my mistake - consistency is key.

Keep practicing, stay curious, and happy coding!

Credits: Image by storyset

Previous Tutorial:

HTML - Events Reference

Next Tutorial:

HTML - ASCII Codes