# How to choose and implement web-safe HTML fonts With HTML fonts, you can give text on your web pages an individual touch. For the best possible user-friendliness, you should always use web-safe fonts. ## Which HTML fonts are available? In theory, there is a huge number of different HTML fonts. As [HTML](https://www.ionos.co.uk/digitalguide/websites/web-development/what-is-html/) itself does not provide a font, you can technically use any font for your web pages as long as you upload and configure it correctly. However, there are various problems that could arise if you do this. In particular, ornate or small fonts are often **not rendered as desired**. This not only has a negative effect on the design of the pages, but also negatively impacts readability. Problems can also occur if an HTML font is not **installed** on the computer of the person visiting your site. ## Web-safe HTML fonts If you’re looking for suitable fonts for your website, you should use web-safe fonts. These are **pre-installed** on most systems or available as web fonts via public servers. This ensures that there are no problems with rendering and that your website is displayed consistently in different browsers and operating systems. ### Web-safe fonts Web-safe fonts are those that are pre-installed on most devices and operating systems. The best-known web-safe fonts include: - Arial - Courier New - Helvetica - Times New Roman - Georgia - Verdana These fonts are widely used and offer a high level of compatibility. ### Web fonts In addition to pre-installed fonts, you can also use [web fonts](https://www.ionos.co.uk/digitalguide/websites/web-design/web-fonts-the-power-of-modern-typography/). Web fonts are loaded from public servers and offer a large selection of typographic styles. One popular provider of web fonts is Google Fonts. Using web fonts allows you to personalise your website’s design without affecting compatibility. Below is an example of how to include a web font: ```html

This is a text that uses the Roboto web font.

``` Tip In our article on [responsive web design and fonts](https://www.ionos.co.uk/digitalguide/websites/web-design/responsive-design-and-font-typography-tips/), we take a closer look at the functionality and advantages of web fonts. ## Which tags are available for using HTML fonts? There are two [HTML tags](https://www.ionos.co.uk/digitalguide/websites/web-development/html-tags/) that can be used for fonts on web pages: `` and ``. However, since the introduction of [HTML5](https://www.ionos.co.uk/digitalguide/websites/web-development/what-is-html5/), both tags are considered outdated. It’s now recommended to manage fonts using [CSS](https://www.ionos.co.uk/digitalguide/websites/web-design/css-coding-made-easy/). ### `` The tag `` is used to select and define HTML fonts. You can use various [HTML attributes](https://www.ionos.co.uk/digitalguide/websites/web-development/html-attributes/) to define the colour, size and font. These are the attributes and their permitted values:
Attribute Value Description
`color` Colour name, hex color code, or [RGB values](https://www.ionos.co.uk/digitalguide/websites/web-design/rgb-colour/) Specifies the colour of the text
`size` Numeric value from 1 to 7 Defines the size of the HTML fonts
`face` Name of the HTML fonts Specifies the desired HTML font family
The syntax of `` is as follows: ```html .... ``` The following code example shows the use of the tag: ```html HTML font tag This is an example text. ``` ### `` The `` tag operates similarly. It sets the HTML font family and its specifications for the entire document. Its attributes are identical to those of the `` tag. The syntax is: ```html .... ``` The following example illustrates font markup with the <basefont>`tag:` ```html HTML font tag This is an example text. ``` ## How to specify font size, font colour and HTML fonts family Since the introduction of HTML5, the two tags mentioned above have fallen **out of use**. However, it’s still possible to define HTML fonts according to your preferences. For example, here’s how to set font sizes in HTML: ```html Font size The font size is = "1"
The font size is = "2"
The font size is = "3"
The font size is = "4"
The font size is = "5"
The font size is = "6"
The font size is = "7" ``` Here’s how to specify font colour: ```html Font colour This text is petrol.
This text is dark red. ``` Here’s how to select an HTML fonts family: ```html HTML fonts family Lucida Console
``` If a website visitor does not have the specified HTML font family installed, a default font will be displayed instead. This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-development/html-fonts/](https://www.ionos.co.uk/digitalguide/websites/web-development/html-fonts/) for AI/LLM consumption.