Your Complete Guide to HTML Fonts (or Web Fonts)

If there’s one thing that’s most important to your website’s branding and appearance, it may just be fonts. A carefully chosen typeface can convey personality, make long passages of text more legible, and solidify your brand in people’s minds.

But you can’t just download any old font and use it on your website. There are quite a few things to take into consideration first.

Where can you find web fonts, what fonts are compatible with HTML, and which are “web safe” and can be used on any website? We’ll explore them all in this article.

Let’s begin!

HTML Fonts: What Are Web Fonts?

Typefaces have a rich history, but fonts, as we know them today, came into wide use with the rise of computers and the internet. Digital fonts needed special treatment to render on screens. And when different screen sizes and devices came into play, things only got more complicated.

When it comes to digital fonts, there are a few different kinds. Some fonts are intended primarily for print and graphic design. These tend to be large and unsuitable for websites, but are perfect for creating graphics. There are also “web safe” fonts that are found on a majority of all machines.

But for web design, what you need to look for are web fonts, typefaces specially designed to render perfectly on the web and across a variety of devices. You can also use web fonts in emails or other online services.

There are a few things that make web fonts different from your standard downloadable desktop font. For one, they often can’t be used with programs on your computer; they must be uploaded to a server and used on the web.

They’re also designed to be legible on different screens and for different sizes. They can be styled with CSS (such as applying bold or italics, colors, and other attributes) and offer support for other conditions like right-to-left rendering.

While web fonts don’t come installed on your or your visitors’ devices, there are special ways of displaying them so anyone who visits your site can see them.

You can either download these fonts like normal and upload them to your server, or use a special web font hosting service that embeds them on your site without requiring a download.

What Fonts Can You Use in HTML?

Some fonts aren’t meant to be used on the web, but which can be inserted into your HTML site?

Essentially, you can use any downloadable font on your site. All you need to do is upload it and configure it properly, and it should display on your website.

But while you can technically use any font on your site, it’s not always the best idea. You should look specifically for web fonts, not fonts meant to be used in print or graphic design. Some fonts are so stylized or intended for such large text sizes that they won’t render properly on your site. With a web font, this isn’t a concern.

There are also licensing issues to worry about when using desktop fonts on your site (or using web fonts for print design). Using a font in a different medium than you purchased it for can get you in trouble. Make sure to read your font’s license carefully before purchasing it.

You can also seek out certain hosts that allow you to use a simple call in the HTML to render their fonts on your own website through either free or paid plans.

Either way, as long as the font you use is uploaded properly and has the right file type:

• TTF
• OTF
• WOFF/WOFF2
• SVG
• EOT

With these font file types, you’ll then be able to use it all across your site and style it with HTML and CSS.

There are also web safe fonts that usually work universally across all browsers and programs.

What Are Web Safe Fonts?

One issue with most web fonts is that there’s no guarantee they’ll display properly on your website. Unlike graphic design, where you can just create an image in a program and print it out for distribution, a browser must render web fonts every time anyone opens the page. If your fonts fail to load, you could end up with a blank, broken website.

For that reason, some website owners choose to rely only on web safe fonts. These come pre-installed on most systems, so they’re guaranteed to show correctly on all but the most obscure devices. They also tend to load much faster than web fonts, which can be slow to show up.

If all you’re worried about is maximizing performance and absolutely ensuring that your site displays fonts correctly, then web safe fonts are for you.

Here is a list of web safe fonts that are generally okay to use.

• Arial
• Brush Script MT
• Comic Sans
• Courier New
• Garamond
• Georgia
• Helvetica
• Impact
• Lucida Console
• Palatino
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

There are also dozens more web safe fonts, but these are the most ubiquitous across devices.

Out of all these, Arial, Times New Roman, Helvetica, and Courier New are the safest. Despite being considered web safe, some of the others don’t work on certain operating systems.

The issue is unless you’re running something like a government site or a simple information site, it’s not worth it to sacrifice your branding by avoiding a majority of fonts. Web safe fonts are legible, but they’re also too generic and overused.

It’s much better to choose a nicer, more unique set of fonts to use on your website, especially since there’s a solution to the issue of web fonts failing to load: fallback fonts.

A Note on Font Stacks

Font stacks, also known as fallback fonts, are the sole reason to use bold and creative web fonts.

No matter what you do or what precautions you take, there is always someone who won’t be able to load your fonts. Perhaps they have Javascript disabled, so your hosted fonts don’t render properly, or something goes wrong in the code and prevents the fonts you uploaded from displaying. Or maybe a certain font isn’t compatible with someone’s device.

Thanks to fallback fonts, it’s easy to load a web safe font if something goes wrong. This works by selecting a font the user has installed based on the font family:

• Serif fonts are defined by small strokes attached to the ends of the letter lines. These fonts are considered elegant and legible.
• Sans serif fonts are designed similarly to serif fonts, but lack strokes. They are simpler and more readable.
• Monospace fonts are evenly spaced between every letter, giving them a distinct appearance.
• Cursive fonts (or Script fonts) depict formal, handwritten letters. They are not very legible and better for headings or graphic design.
• Fantasy fonts (or Decorative fonts) are highly stylized, and like cursive fonts, not appropriate as body text.

Remember that font stacks are indeed a “stack”; it is entirely possible to have multiple fallback fonts in sequence. Just make sure you always have a web safe font at the end of the stack, and you still have a chance to get your branding across with a similar font if the main one fails.

How to Add Fonts With HTML

If you want to add a web font to your site, you have a few options.

For WordPress users, the easiest way to get fonts onto your site is by using a plugin. The two most popular ones are Easy Google Fonts and Use Any Font. The former simplifies the process of adding Google Fonts to your website, while UAF allows you to upload fonts to your site directly.

If you’re not using WordPress, or don’t want to rely on a plugin, the process will require some manual tinkering.

First, you can use fonts hosted elsewhere, such as with Google Fonts. Instructions here depend on which service you choose. With Google Fonts, you would need to embed the font you want to use in your <head> and then call on it when you want to use it.

You can also locally host fonts that you’ve downloaded off the internet on your website. This can be preferable because you won’t need to rely on third-party services.

Luckily, this is very easy to do as long as you have a properly configured web font. Just upload the files to your server, then use the @font-face rule in your stylesheet to define it. For example:

@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Then you can use the font-family tag to call on your font wherever you want it in the HTML document.

Styling Fonts With HTML and CSS

Once your font is safely uploaded to your website, you can now style it with HTML and CSS. Even if you have very little programming skill, styling a font is fairly easy. You can change the text color, background color, size, style, or weight.

Note: If you worked with older HTML versions, you might remember the <font> tag. This is no longer supported and shouldn’t be used. Instead, you can style text with CSS or an HTML style element.

First up, you can change the font with color codes. You can either use a color name like “red,” an RGB code, or a HEX value. This is set with the color property like so:

p {

color: blue;

}

Or in an individual HTML style element:

<p style="color:blue;">Text.</p>

Background color is the same, but using the background-color attribute.

p {

background-color: blue;

}

Next is font size. This can either be in pixels, percentages, or ems (which are good for designing responsive sites).

 p {

font-size: 16px;

}

Or:

<p style="font-size:200%;">Text.</p>

And last are font style and weight, or italics and bold. For slanted text, use the “italic” tag.

.italic {

font-style: italic;

}

And for bold: 

.bold {

font-weight: bold;

}

You can also use HTML tags instead. For italics, you can use:

<em>

for a text that conveys emphasis, or use:

 <i> 

for a text that is meant to be visually distinct.

And for bold, use:

<b> or <strong>

For example:

<b>Bold Text</b>

or

<strong>I'm of special importance.</strong>

Where to Get HTML Fonts?

Whether you want to use a third-party font host or download them, you need to know where the best places to find fonts are. There are hundreds of distributors out there, but a good handful are known to be reliable sources for getting fonts. Here are a few:

• Google Fonts is one of the best places to get fonts. Why? You can easily embed them on your site without downloading any, its selection is vast and beautiful, and most importantly, it’s completely free. Google servers are always fast, so you can trust them to deliver the fonts with as little delay as possible.

• Adobe Fonts offers thousands of fonts with any Creative Cloud subscriptions. With other services (that don’t rely on open source fonts like Google Fonts, at least), you often need to worry about licensing. These fonts are cleared for use in any project, personal or commercial.
• Fonts.com has a wide selection of fonts for both desktop and web use. They provide you with the code you need to get it on your site. The issue is there are several different licenses, and it can be a bit confusing. Payment is based on a one-time fee or a pay-as-you-go model.
• TypeNetwork offers high-quality fonts for serious projects with a variety of licensing options. Purchase fonts for desktop, web, applications, or ePub. Web fonts also come with an extra option: hosted or self-hosted.
• Before Google Fonts ever existed, Font Squirrel was the place to find free, commercially-licensed fonts for use in any project. It has quite the selection, but sadly there is no option for font hosting. You’ll need to download the fonts and upload them to your site manually. Not all fonts are optimized for the web either, but you can try the Webfont Generator.

The Top 10 HTML Fonts

There are thousands of web fonts out there, but where to start? Here are ten simple HTML fonts that would look great on any website. These are all web safe, so they should work on almost all devices. They also make great fallback fonts.

If you need something a little more exciting, we have plenty of articles on cursive fonts, calligraphy fonts, and modern fonts.

1. Arial

Arial is the most well-known of all fonts. It’s not the most beautiful, but it’s simple and useful in a variety of situations.

2. Times New Roman

Times New Roman is also an extremely common font. It’s best if you’re running a more formal site. This serif font isn’t particularly exciting, but it’s not distracting either.

3. Palatino

Palatino may look familiar to you, as it’s often used in book printing. Now it’s an elegant digital typeface included by default on many devices.

4. Verdana

Verdana is known for being very easy to read, and it continues to look great at even large sizes. This sans serif is a good Arial alternative.

5. Courier New

Reminiscent of old typewriter text, Courier New is a great monospaced design for sites that want an old-fashioned but legible look.

6. Calibri

Calibri is a simple, lovely sans serif font that comes standard with programs like Microsoft Office. However, it is a proprietary font, so it’s often only supported on Windows operating systems.

7. Georgia

This rounded serif font is inspired by the similar web safe font Garamond. If you need a formal font not quite as serious as Times New Roman, it’s a good choice.

8. Garamond

Much like Palatino, Garamond is a classic font often used for book printing. Despite being updated for modern operating systems, it still looks fairly old-fashioned.

9. Didot

The minimal letter spacing on this serif font gives it a unique look and feel. You can find it on most Apple devices.

10. Tahoma

This clean font has acted as the default typeface for older Windows OSes. Its bolder appearance makes it stand out just enough without being distracting.

Summary

It’s important to choose web fonts that will look good on your website and be readable and personify your brand. There are various websites where you can install free fonts or download licensed ones for a fee, and we’ve offered a few examples of good fonts to start with.

You don’t have to stick with boring web safe fonts you’ve been seeing all over the internet for decades. Thanks to fallback fonts, you can go with whatever typography you like and set a fallback to be used if it doesn’t load.

Whether you’re using these HTML fonts on your website, in emails, or your logo, make sure you do plenty of testing, so your site remains readable, and the typography meshes well with the rest of your design.