When people start working with HTML and CSS, they often ask which fonts are available. They ask: what are the types of fonts in HTML? That is, what fonts can we use in an HTML document? What fonts can we use as part of a CSS “font family”? In this quick guide we will tell you all the truth about these fonts.
“Out-of-the-box” Types of Fonts in HTML
If you want a quick list of fonts we can use, here you have it:
- Arial
- Verdana
- Helvetica
- Tahoma
- Trebuchet MS
- Times New Roman
- Georgia
- Garamond
- Courier New
- Brush Script MT
If you use any of these fonts, it will work virtually all the time and there is nothing special you must do. In fact, you can simply use it through the CSS property “font-family” that you can apply, either inside HTML or CSS.
<p style="font-family: 'Arial';">My text</p>p {
font-family: 'Arial';
}To help you pick a font, you can look at the following image that explains what each font looks like. You can also find these fonts in your document editor, such as Word.
In addition to the fonts, you can also specify a type of font: serif (like Times New Roman), sans-serif (like Arial), and monospace (like Courier New). This is like not specifying any specific font, but instead letting the user device choose a font that is of the specified category.
The Truth about HTML and CSS Fonts
So, is that it? Are we really limited to 10 fonts in our HTML and CSS code? Obviously, no. We can do much more than using these mundane fonts, but before we do it, we need to understand how HTML and CSS deal with fonts.
The reality is, there is no HTML or CSS font that comes baked into the code. Instead, whenever we specify a font, we are telling the user’s device “hey, can you please use that font?”. This means the user’s device will have to know that font, and how to display it. It is like we are giving someone a piece of text and asking: “Can you please translate it in Russian?” – that person must know Russian indeed.
But what is this knowledge exactly? What does it mean for the device to “know” a font? Well, in short it means possessing a file. In the end, a font is just a file that tells a device like a PC or smartphone how to write text for that given fonts. You can think of it like a file with some “paint” instructions so that a letter A will appear in a way, a letter B will appear in some other way and so on. Generally, these files have a .ttf or .otf extension, and each device comes packed with many of them.
This gives us an important insight. We can specify in CSS any font that the user has already on its device, and it will work perfectly fine. The reason for this is that the device already knows exactly how to render that font.
However, this gives us two problems. First, we can only assume what fonts the user has: any device will be different. Second, when the user happens to not have a font, we have no idea how the font will appear. Fortunately, we have a solution to both.
Fallback Font in CSS
You do not have to specify just one font; you can specify a sequence of fonts! This is a great solution to address situations when the user does not have the font that you want. Simply put, you use the font family property and write a list of fonts, separating them with commas (I also recommend quoting font names).
p {
font-family: 'Roboto', 'Arial', sans-serif;
}And here is the magic: the user device that interpret this code will attempt to use the first font first. If it does not have it, it will try with the second, and so on until the end. A good solution is to put a font-category at the end (no quotes as it is not a font), because font categories are always available. So, as your last “font”, you should always use either serif, sans-serif, or monospace.
Loading Custom Fonts
What if we want an extremely specific font? Do we have a way to install a font if the user does not have it? Yes, we do! Even if, technically, we are not installing the font on the user’s device, we can do something that has the same result for us.
Installing a font means that the font is available for any website, but also in applications where you can write text such as Word or even Photoshop. We cannot install a font in the user’s device because it will be a significant security vulnerability: putting a file in the user’s computer. Even worse, all websites could do that, saturating the user’s PC. Not to mention that you, as website owner, may have the license to use a font – the user may not have it.
Instead, we can easily make available a specific font so that the user will see it only on our website. This is possible with the CSS property @font-face. This property tells the user’s device the name of the font and an URL to a downloadable file for that font.
@font-face {
font-family: 'Roboto';
src: url("../assets/Roboto-Regular.ttf")
}To do this, you necessarily need to use CSS (you cannot use inline CSS inside HTML). Yet, we can consider it an HTML font because we can later use it inline like so:
<p style="font-family: 'Roboto';">My text with Roboto</p>All this means that you will either must upload your font file online or find someone that provides that font for you. Google Fonts provides a beautiful set of fonts that you can use for free in your websites and that you can serve through their CDN. The following example loads the Roboto font.
We have a full tutorial on How to Use Fonts in CSS that you may want to check-out.
Types of Fonts in HTML Recap
We have 10 fonts available out-of-the-box in HTML: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, and Brush Script MT. However, we can go beyond that limit by installing our font faces.
When we decide to install font faces, we need to remember that we should always use some fallback fonts in CSS, ideally a font category such as serif, sans-serif, or monospace.
One extra tip: less is more. Do not overcrowd your website with many different fonts, because each is a file to load and soon you will bog down your website speed. Instead, pick 2 to 3 fonts you like, and most importantly only use the variances you need for real. For example, if you use Roboto at weight 300, 400, and 900 (Light, normal, and black), you do not need to load the file for Roboto at weight 500 or 600, so do not do it!
Hopefully, this guide will set you on the right path to use all the types of fonts in HTML that you want. I will see you in the Internet!
