codescracker


html

HTML Fonts



« Previous Tutorial Next Tutorial »


The HTML font tag (<font>) is used to specify the font face, size, and color of the text in an HTML document. But the font tag is not supported in HTML5. You can use CSS instead.

HTML Set Font Size

You can set content font size using the size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

You can also use font-size in pixels and percentage. Let's look at the following example shows how to set font size in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Fonts Example</title>
</head>
<body>

<p style="font-size:12px">Using HTML Font (12px)</p>
<p style="font-size:22px">Using HTML Font (22px)</p>
<p style="font-size:80%">Using HTML Font (80%)</p>
<p style="font-size:120%">Using HTML Font (120%)</p>
<p style="font-size:1em">Using HTML Font (1em)</p>
<p style="font-size:1.5em">Using HTML Font (1.5em)</p>

</body>
</html>

Here is the sample output produced by the above HTML font example code:

HTML Font Size Setting Example

HTML Set Text Font

You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer.

You can also use font-family to set font of the text. Let's Look at the following example shows how to set font of the text in an HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Font Example</title>
</head>
<body>

<font face="Verdana">Using HTML Font (Verdana)</font><br />
<font face="Times New Roman">Using HTML Font (Times New Roman)<br />
<p style="font-family:verdana">Using HTML Font (verdana)</p>
<p style="font-family:'Courier New'">Using HTML Font (Courier New)</p>

</body>
</html>

Here is the sample output displayed by the above HTML font example program:

HTML Text Font Setting

HTML Set Font Color

You can set any font color using color attribute. You can specify the color that you want by either the color name or hexadecimal code or by using their rgb values. Let's look at the following example shows how to set font color in an HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Font Example</title>
</head>
<body>

<p style="color:#ff0055;">Using HTML Font (hexadecimal=#ff0055)</font><br />
<p style="color:blue;">Using HTML Font (name=blue)</p>
<p style="color:rgb(0, 190, 125);">Using HTML Font (rbg=rgb(0,190,125))</p>

</body>
</html>

It will display the following in the browser:

HTML Font Color Setting Example

To get code of all colors in HTML, refer HTML All Color Codes.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test