How to change font in HTML
To give style to the content of your website, you may change the font of the text and make your website look attractive to the user.
There are several methods which help to change the font of text:
Use of the Style attribute:
We can use the inline style attribute to change the font of the text on the webpage. We can use the style attribute inside any element to change its text.
Syntax:
<element_name style="font-family: font_name;"> Some text </p>
It is important always to write the style attribute inside the starting tag.
Example:
We are using the font-family property of the style attribute to change the text font. We will use four different font families in different paragraphs to make you understand better. You can try the below code to change the text of your web page.
<!DOCTYPE html>
<html>
<head>
<title> Example 1 of Changing the Font of the Text </title>
</head>
<body>
<h1> Changing text font using the style attribute with font-family property. </h1>
<p style="font-family: Arial;"> Font style 1 </p>
<p style="font-family: sans-serif;"> Font style 2 </p>
<p style="font-family: 'Segoe UI';"> Font style 3 </p>
<p style="font-family: 'Times New Roman';"> Font style 4 </p>
</body>
</html>
Output:
The output shows the heading, and then it shows the different text fonts applied to different paragraphs. You can see the difference between these font styles. Each font looks different from the others.
Use of the Font Tag:
You can change the font of the text by using the <font> tag. To change the text font, we need to use the face attribute inside the <font> tag to specify the font type.
Syntax of font tag:
<font face="arial"> Some text </font>
It is necessary to write the starting tag first. In the above syntax, the <font> tag is the starting tag containing the face attribute to specify the font type. It ends with the ending tag. A tag whose name is preceded by a forward slash is called an ending tag. In the above case </font> is the ending tag. The text to which you want to apply the font must be written between the opening and ending tags.
Example:
This example demonstrates the use of the font tag. We will apply two different types of fonts to the text. The one is Arial font, and the other is courier font.
<!DOCTYPE html>
<html>
<head>
<title> Example 2 of Changing the Font of the Text </title>
</head>
<body>
<h3> Changing text font by using the Font Tag with the face attribute. </h3>
<font face="Arial"> Text on which we are applying Arial font. </font> <br> <br>
<font face="Courier"> Text on which we are applying Courier font. </font> <br> <br>
</body>
</html>
Output:
As you can see, the output shows a heading and two lines with different fonts. The difference in the font can be easily seen. The first line of text is in Arial font, and the other line of text is in courier font.
Embedding CSS using <style> tag inside the head section:
We can embed CSS in the HTML document using <style> tag. We can add the CSS code inside the style tag and put this style tag inside the head section.
Example:
This example illustrates how to embed CSS into an HTML document. We will change the font of paragraph elements. We will provide the class name to both the paragraphs and apply the font to the text written inside these classes inside the <style> tag.
<!DOCTYPE html>
<html>
<head>
<title> Example 3 of Changing the Font of the Text </title>
<style>
.text1{
font-family: Courier;
}
.text2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
</head>
<body>
<h3> Changing text font by embedding CSS. </h3>
<p class="text1"> Text on which we are applying Courier font. </p>
<p class="text2"> Text on which we are applying multiple fonts. </p>
</body>
</html>
Output:
The output shows the heading and two paragraphs of different text fonts. You can see that the text in both paragraphs looks different.
