Skip to content

HTML for greens - HTML

Font family

How do I change the font type on a Web page?

<span style="font-family: font">Enter text here</span>
or
<span style="font-family: font1, font2, font3, ...">Enter text here</span>
where instead of font, font1, font2, font3, ..., you should enter font names (e.g., Arial, 'Courier New', 'Times New Roman', Verdana, and others). If the font name consists of multiple words, enclose it in single quotes (e.g., <span style="font-family: Verdana, 'Times New Roman', Arial">Text</span>).
You can enter additional font names separated by commas instead of dots (remove the dots themselves).

Attention! Be cautious when using this command because if the user viewing your page does not have the specified font on their operating system, the text will be displayed in the default font (in Windows, most likely 'Times New Roman', although this is not certain). Additionally, not every font can correctly display diactitic characters from any language. Make sure to test the result in practice!

In the case of the second command, the font that the user has as the first in their list will be used. This is a better approach as it allows for a fallback in case the user does not have one of the specified fonts.

In Windows, the following fonts should be standardly available: 'Times New Roman', Arial, 'Courier New'. Additionally, as of some time ago, Internet Explorer comes with: Verdana, Tahoma, 'Trebuchet MS', Georgia. When defining fonts, it's a good idea to use these fonts and those that are default in other operating systems (e.g., Helvetica - similar to Arial).

Example {font-family}

Arial Font
'Courier New' Font
'Times New Roman' Font
Verdana Font

Questions and Answers

What are the types of fonts?

The most popular types of fonts include: 'Times New Roman', Arial, 'Courier New', Verdana, Tahoma, 'Trebuchet MS', Georgia, Helvetica.

How to change the font family in HTML?

To do this, you need to enclose the text within a tag with an attribute set to an appropriate value - for example: <span style="font-family: Arial">...</span>, <span style="font-family: 'Courier New'">...</span>, <span style="font-family: 'Times New Roman'">...</span>, <span style="font-family: Verdana">...</span>.