CSS Web Safe Fonts for HTML

Published September 21, 2022

The following fonts are the best web safe fonts for HTML and CSS:

Arial (sans-serif)
Brush Script MT (cursive)
Courier New (monospace)
Garamond (serif)
Georgia (serif)
Tahoma (sans-serif)
Times New Roman (serif)
Trebuchet MS (sans-serif)
Verdana (sans-serif)

CSS Web Safe Fonts for HTML

Arial (sans-serif)

Arial is one of the safest web fonts, and it is available on all major operating systems.

Arial is the most widely used font for both online and printed media.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
    }
</style>
</head>

<body>

    <h1>Heading with Arial, sans-serif</h1>

    <p>A Paragraph with Arial, sans-serif</p>

</body>
</html>

Brush Script MT (cursive)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Brush Script MT', cursive;
    }
</style>
</head>

<body>

    <h1>Heading with 'Brush Script MT', cursive</h1>

    <p>A Paragraph with 'Brush Script MT', cursive</p>

</body>
</html>

Courier New (monospace)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Courier New', monospace;
    }
</style>
</head>

<body>

    <h1>Heading with 'Courier New', monospace</h1>

    <p>A Paragraph with 'Courier New', monospace</p>

</body>
</html>

Garamond (serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Garamond, serif;
    }
</style>
</head>

<body>

    <h1>Heading with Garamond, serif</h1>

    <p>A Paragraph with Garamond, serif</p>

</body>
</html>

Georgia (serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Georgia, serif;
    }
</style>
</head>

<body>

    <h1>Heading with font-family: Georgia, serif;</h1>

    <p>A Paragraph with font-family: Georgia, serif;</p>

</body>
</html>

Tahoma (sans-serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Tahoma, sans-serif;
    }
</style>
</head>

<body>

    <h1>Heading with Tahoma, sans-serif</h1>

    <p>A Paragraph with Tahoma, sans-serif</p>

</body>
</html>

Times New Roman (serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Times New Roman', serif;
    }
</style>
</head>

<body>

    <h1>Heading with 'Times New Roman', serif</h1>

    <p>A Paragraph with 'Times New Roman', serif</p>

</body>
</html>

Trebuchet MS (sans-serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Trebuchet MS', sans-serif;
    }
</style>
</head>

<body>

    <h1>Heading with 'Trebuchet MS', sans-serif</h1>

    <p>A Paragraph with 'Trebuchet MS', sans-serif</p>

</body>
</html>

Verdana (sans serif)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Verdana, sans-serif;
    }
</style>
</head>

<body>

    <h1>Heading with Verdana, sans-serif</h1>

    <p>A Paragraph with Verdana, sans-serif</p>

</body>
</html>