To change fonts in HTML, you can use either the <font> tag or the style attribute. However, it's important to note that the <font> tag is deprecated in HTML5 and it's recommended to use CSS for styling instead. Here's how you can do it using both methods:
How to Change Font in HTML
1. Using <font> Tag (Deprecated)
The <font> tag was used in older versions of HTML to specify the font face and size. Here's how you would use it:
<!DOCTYPE html>
<html>
<head>
<title>Change Font Using HTML tag</title>
</head>
<body>
<font face="Courier">Hello !! How Are You</font> <br>
<font face="Arial">Hello User!</font> <br>
How are You?
</body>
</html>
- Explanation:
- The
<font>tag is used to enclose text that you want to apply a specific font face to. - The
faceattribute specifies the font family. In the example,face="Courier"changes the font of "Hello JavaTpoint!" to Courier, andface="Arial"changes the font of "Hello User!" to Arial.
- The
2. Using style Attribute (Inline CSS)
Inline styles can be applied directly to HTML elements using the style attribute. This is more flexible and easier to maintain compared to the <font> tag.
<!DOCTYPE html>
<html>
<head>
<title>Change Font Using style attribute</title>
</head>
<body>
<p style="font-family: Courier;">Hello How are You</p>
<p style="font-family: Arial;">Hello User!</p>
<p>How are You?</p>
</body>
</html>
- Explanation:
- Each
<p>tag has astyleattribute that sets thefont-familyproperty to specify the desired font. - You can add other CSS properties within the
styleattribute to further customize the text appearance.
- Each
Recommendations:
- Use CSS: The
<font>tag is deprecated in HTML5, so it's best to use CSS for styling purposes. Create a separate CSS file and link it to your HTML document for better maintainability and scalability. - Accessibility: Ensure that the fonts you choose are readable and consider using web-safe fonts or Google Fonts for a wider range of options.
- Consistency: Apply fonts consistently throughout your website to maintain a cohesive design.
By following these methods, you can effectively change the font of text in your HTML documents.