Changing the font in HTML is one of the core competencies of every web programmer. In this process, it includes not only changing the font in HTML, but also font colors and size in HTML.
But what are the HTML codes used to change the font of the contents that make up a web page? what are the steps to change the font and modify the font size in this programming language?
Don’t worry, because throughout this WP article, we will tell you in detail, everything you need to know regarding the procedure to change the font in html. And so, you will be able to optimize the presentation of your online sites and make your design projects look 100% professional.
1. Change the font type in html
If you want to change the font in HTML, you will have to use the CSS property font-family, by means of which you will be able to set a certain value and place it as a style attribute. Subsequently, you must add it to an HTML element, such as a paragraph, a heading or a button .
As a result, inline CSS will be applied; and this means that the HTML and CSS will be set simultaneously within the body of the HTML document. Thus, a font change will occur in HTML.
According to a HubSpot analysis, 48% of users consider web design to be the main variable that determines the level of professional credibility of an online site. With this premise in mind, it is essential that you know how to change the font in html, if you want to learn how to program.
In this way, you will be able to choose the html font, size, colors, etc. according to the preferences of your customers and the message you want to convey to the target audience through a web page.
Let’s take as an example that we want to change the font in HTML of a paragraph taking into account the Arial font. To do this, we should use the font code in HTML:
<font face=”Arial”>Text</font>.
However, when changing the font in HTML, keep in mind that this HTML tag does not usually work with HTML5, the latest version of HTML. It’s just that not all users have all fonts available, depending on the platform they use. And in that case, the web page will not display the font that we have set through the HTML code. Instead, the text will be displayed by default, i.e. with a Times New Roman font, which can affect the visual harmony you want to communicate.
As a workaround for this situation, when changing the font in HTML, you can usually set several fonts separated by commas in the code. Thus, when changing fonts, in the event that the browser does not have the first of the assigned fonts available, itwill check the availability of the second font. And if this is not available either, it will continue trying with the third font .
Here is an example so that you know how to write your code when changing the font in HTML and avoid the default font appearing in your web designs:
<font face=”nunito,arial,verdana”>Text</font>.
Source: Pexels
While using inline CSS is fine, you can also use other CSS styles, such as internal CSS. This can be set in the document header in HTML and set the style on different elements of the page.
So, in case you want to change the font in HTML of all the elements that make up a paragraph to Arial font, you should use a CSS selector as follows:
p {
font-family: Arial;
}
And as a consequence, the HTML font of all the text on your page will be changed.
Well, in this analysis on how to change the font in HTML, you already know how to do it using inline and internal CSS. Now, we will see how to change the font size taking into account this programming language.
2. Change the font size in html
Changing the font size in HTML is easy. All you have to do is use the CSS font size property. You must set the desired value and place it inside a style attribute. Then add it to an HTML element, such as a heading, paragraph, button or extension tag .
In fact, to change the font in HTML, taking into account the size, you have available 7 degrees of size that are numbered from 1 to 7 according to an increasing dimensional variable. Thus, size=”1″ implies the smallest font size; and size=”7″, the largest dimension. 
Source: Pexels
Suppose you want to set a size of 4 to a certain text on your page. To do so, you should write the following code:
<font size=”4″; Text with size4</font>.
So, in case you want to change the font in HTML contemplating the size, in a certain paragraph, you should use the <p>Text</p> paragraph tag. Then, you should include the font tag like this:
<p><font size=”4″>Text with size 4</font></p>.
If, on the other hand, you want to change the font size in HTML in a heading, you will have to use the <h1>, <h2>, etc. tag along with the font tag .
Also, you can use a CSS selector, if you want all the elements of a paragraph to have the same font size. We leave an example for you to understand perfectly this procedure, when changing the font in HTML from the perspective of a size of 3:
p {
font-size: 3;
}
Note that you can vary the font size change in HTML depending on the previous text by setting the number of levels you want to increase or decrease. Do this by using a “+” or “-” sign. In this way, in case you have set your style attribute as size=”+1″, and your font size has been set to 4, when you continue typing, it will change to a size of 5.
Within this procedure for changing the font size in HTML, the <BASEFONT SIZE=value> element becomes important . As a result, the text on the page will have the size that has been indicated as “value”. And it will be maintained until another <BASEFONT SIZE=value> element arises that performs the restoration of the size or modification by a different one.
Thus, the sizes can be indicated relatively (+ or -) depending on a comparison with the base dimension. An example to change the default font in HTML with basefont, would be the following:
<BASEFONT SIZE=”2″>
This is text size 2,
<FONT SIZE=”+4″>
this is size 6,
</FONT>
<FONT SIZE=”+1″>
and this is a text of size 3
</FONT>
In summary, by using the basefont tag, you can set the default size of a font in HTML. Anyway, the basefont tag cannot be applied in HTML5 and is disregarded in HTML 4.01. So it is convenient to use CSS.
Within this process of learning how to change the font in HTML; and especially, the size, do not forget that the actual size will depend on the font dimension that is determined in the browser. You can change the font in HTML in a customized way. To do this, go to the top menu and click on View/Font Size .
3. Vary the font color in html
According to a Forbes study, the choice of color palette in any design is essential for users to decode the message you want to communicate. And for example, within the context of digital marketing, knowing how to choose font colors in HTML will be essential if you want to generate a call to action in the audience, which will consist of marketing or positioning a certain product and/or service in the market.
Therefore, in case you want to change the font in HTML taking into account the color, you will have to use the <font> tag and the CSS color property, then, you will have to set the value you want and place it inside a style attribute. Then add that style attribute to an HTML element such as a paragraph, heading, button or extension tag. 
Font: Pexels
Each of the text colors is defined by a hexadecimal numbering, composed of three patterns that refer to the color palette (RGB), consisting of red (Red), green (Green) and blue (Blue), through the following code: #RRGGBB.
By combining these three colors, you can obtain a total of 16 million shades to change the fonts in HTML. At the beginning, setting the colors for the fonts of your web designs can be complicated, but with practice, you will see that it is a simple procedure and that it will provide an ideal visual aspect to your online sites .
Thus, the colors are formed by means of values starting from 00 (0 decimal) to FF (255 decimal). In this process of changing the font in HTML, from the color perspective, remember that the intensity of the color you choose will depend on the increase of the numbering of the value. The scale, then, could be conformed as follows:
Minimum color scale: null = 00.
Scale of medium colors: average = 80.
Maximum color scale: saturated = FF.
Here, we leave the HTML color code (Hex Code) for you to use in all your web design projects; and to illustrate the concepts that we have been presenting in this analysis on how to change the font in HTML from the point of view of color.
Source: HubSpot
For example, in case you want to use the HEX code and choose the color chocolate (D2691E) for one of your headers (H2), you should write the following code in html:
<h2 style=”color: #D2691E”>Heading 2</h2>.
On the other hand, if you want to change the font in HTML by setting the color red (FF0000) in the body of your text, you should write the following code in HTML:
<body>
<p style=”color: #FF0000″;>Red paragraph text</p>
</body>
Now, you can also change the font in HTML; and especially, the font colors in HTML through a name-based system. In fact, you only need to set the color name as a value in English. Note that some browsers do not support this kind of colors when you change the fonts in HTML.
To let you know some of the colors available for changing fonts in HTML, here are some of them:
Black
White
Green
Maroon (reddish brown)
Olive (olive green)
Navy (navy blue)
Purple (violet)
Red
Yellow (yellow)
Blue
Teal (teal)
Lime (lime green)
Aqua (light blue)
Fuchsia (fusia)
Silver (light gray).
In conclusion and exemplifying, in order for you to change the color of your text in HTML, you should write the following code, assuming you want to set the color blue for your texts:
<font color=”blue”>Text</font>
Font: Pexels
As you will see, changing the font in html is a simple process, if you take into account these tips that we have given you throughout this guide. Generating quality content, with eye-catching HTML fonts that match your clients’ requests, will increase your credibility as a web developer.