In HTML, there are two methods to modify the font:
- By utilizing an HTML tag
- By employing the style attribute
1. Using HTML tag
To modify the font of text displayed on a webpage using an HTML tag, we need to adhere to the following guidelines. By following these instructions, we can seamlessly adjust the font:
In the first step, we need to enter the HTML code into a text editor or open an already existing HTML file in the text editor where we intend to utilize the HTML tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Change font Using HTML tag
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br>
How are You?
</Body>
</Html>
Step 2: Next, position the cursor at the beginning of the text for which we intend to modify the font. Subsequently, insert an empty HTML <font> tag at that specific location.
<font> Single Line text and statements
Step 3 involves concluding the font tag at the conclusion of the text for which the font adjustment is desired.
<font> Single Line text and statements </font>
Step 4: Next, we will include the "face" attribute within the opening <font> tag in the font element. Subsequently, the font name needs to be specified within the "face" attribute, as illustrated in the subsequent code block.
<!Doctype Html>
<Html>
<Head>
<Title>
Change font Using HTML tag
</Title>
</Head>
<Body>
<font face="Courier">
Hello World! <br>
</font>
<font face="Arial">
Hello User! <br>
How are You?
</font>
</Body>
</Html>
Step 5 involves saving the HTML code and then executing it. Upon running the code, the output will be displayed in the web browser as follows:
2. Using Style attribute
To modify the font of text that will appear on a webpage using the style attribute, we need to adhere to the following instructions. By following these steps, we can seamlessly alter the font style.
To begin, the initial step involves inputting the HTML code into a text editor or accessing an already existing HTML file within the preferred text editor where the style attribute is intended to be applied.
<!Doctype Html>
<Html>
<Head>
<Title>
Change font using CSS Tag
</Title>
</Head>
<Body>
C# Tutorial is the Best Site for providing education.
</Body>
</Html>
Step 2: Next, position the cursor at the beginning of the text for which we wish to modify the font. Subsequently, input the CSS style property within the designated <p> (paragraph) element.
<p style="font-family:Courier; "> Any Text
Step 3: Subsequently, it is necessary to conclude the paragraph tag at the conclusion of the text for which we intend to modify the font.
<p style="font-family:Courier; "> Any Text </p>
Step 4: Finally, store the provided HTML code that modifies the font by utilizing the CSS style attribute.
<!Doctype Html>
<Html>
<Head>
<Title>
Change font using CSS Tag
</Title>
</Head>
<Body>
<p style="font-family:Courier; ">
C# Tutorial is the Best Site for providing education.
</p>
Hii User!
</Body>
</Html>
Upon executing the provided HTML code, the resultant output will be displayed in a web browser as follows: