Quick Reach
The Font in HTML
The font tag is used to set the size, color, style and family of text in web pages. You can set the font of a specific section (like a paragraph, headings, div) in HTML documents separately. For example, you need to set the bigger headings with a different font family while paragraphs with normal size and different font family.
The syntax of font in HTML is:
<font color=”blue” size=”2”>HTML font</font>
After opening the <font> tag, you can specify the attributes of the font. This is followed by the text and then you have to close the font tag by using </font> otherwise font will be applied to the following text until you close it.
Note that, the <font> tag is no more supported in HTML 5. Instead, you have to specify the font properties in CSS.
The examples below show how to use font tag in HTML. We will set the font in the headings and other text related tags of HTML with different font attributes.
The examples also show how to set the font properties in CSS and apply to the headings, <div> and <p> tags of HTML.
A few examples of font
Font size attribute with font tag example
Font color example in the font tag
Font face example with Verdana, Arial
Font face with font-family property example
Font size attribute in the font tag
The font size attribute sets the size of the text. You should not use it in the future HTML coding. See the following example of using the font attribute:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>Font example</title>
</head>
<body>
<h1><font size=“6” color=“red”>This is heading 1 </font></h1>
<h2><font size=“4” color=“blue”>This is Heading 2 </font></h2>
<p> <font size=“4” color=“#003399”>This is Paragraph </font></p>
</body>
</html>
|
Font size with CSS example
The following example sets the font size property inside the CSS block. Learn more about the font size property in its chapter.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:20pt;
}
p
{
font-family:Arial, Verana;
font-weight:400;
font-size:1em;
}
</style>
</head>
<body>
<h1>This is heading 1 with px font-size</h1>
<h2>This is Heading 2 with pt font-size</h2>
<p>This is Paragraph with em font-size</p>
</body>
</html>
|
The font color
The font color HTML attribute sets the color of text. You can give a color name like green, red, black etc. You can also use color codes in HEX or RGB format.
The following example shows how to use the font color attribute in the font tag. Below, you can also see setting the font color of different text in HTML elements by using CSS.
Font color HTML tag
The example sets the font color in the font tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>Font HTML</title>
</head>
<body>
<h1><font size=“6” color=“red”>This is heading 1 </font></h1>
<h2><font size=“4” color=“blue”>This is Heading 2 </font></h2>
<p> <font size=“4” color=“#003399”>This is Paragraph </font></p>
</body>
</html>
|
Font color with CSS
In this example, we will set the color for h1, h2, and <p> tag by using the font color property in CSS.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS text*/
h1
{
background-color: #F0F0F0;
color: #355681;
}
h2
{
background-color: #355681;
color: white;
}
p
{
background-color: #F0F0F0;
color: rgb(000,125,255);
}
</style>
</head>
<body>
<h1>heading 1 with HEX value</h1>
<h2>Heading 2 with color name (white)</h2>
<p>Paragraph with RGB value</p>
</body>
</html>
|
The Font Face
The font face attribute sets the font family of the text.
The example below shows how to use font face attribute in HTML fonts tag. Note that, the font tag is no more supported in HTML 5. See font-family section after this example.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>Font </title>
</head>
<body>
<h1><font size=“6” face=“arial verdana”>This is heading 1 </font></h1>
<h2><font size=“4” face=“verdana arial”>This is Heading 2 </font></h2>
<p> <font size=“4” face=“Sans-serif verdana arial”>This is Paragraph </font></p>
</body>
</html>
|
For detail on font-face go to its chapter.
Font Family
As such, the <font> attribute is not supported in HTML 5. This example shows how to use the font-family property in CSS to apply the font name to different elements, (h1, h2 and div tags).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial, Serif;
font-size:25px;
background-color: #F0F0F0;
color: #355681;
}
h2
{
font-family:“Times New Roman”, Arial, Serif;
font-size:20px;
background-color: #355681;
color: #F0F0F0;
}
p
{
font-family:Arial, Verana, serif;
font-size:15px;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1 with Verdana as primary font-family</h1>
<h2>This is Heading 2 with “Times New Roman” as primary font-family</h2>
<p>This is Paragraph with Arial as primary font-family</p>
</body>
</html>
|
The last font name in the list should be one of five generic family names that are always available in HTML and CSS. For detail about the font-family property and the generic names go to font-family chapter.
The Font weight
In order to make the text bold or normal, the font weight property is used. A value between thin and thick (normal to bold) can also be given. You can also use the <b> tag of HTML to make the text bold, however, like many other font properties can be set by using the CSS, this is recommended to use the font-weight property in CSS to make the HTML text bold.
Example of using font-weight to make text bold to normal
This example sets the font-weight of heading1 as bold, heading 2 as lighter and makes it normal for the paragraph.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-weight:bold;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:lighter;
font-size:20px;
}
p
{
font-family:Arial, Verana;
font-weight:normal;
font-size:15px;
}
</style>
</head>
<body>
<h1>This is heading 1 with bold font-weight</h1>
<h2>This is Heading 2 with lighter font-weight</h2>
<p>This is Paragraph with normal font-weight</p>
</body>
</html>
|
Font weight with number value example
A number can also be given in the font-weight property to specify from normal to the bold range. A value of 400 means its normal and 700 means bold. See the following example:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-weight:900;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:700;
font-size:20px;
}
p
{
font-family:Arial, Verana;
font-weight:400;
font-size:15px;
}
</style>
</head>
<body>
<h1>This is heading 1 with 900 font-weight</h1>
<h2>This is Heading 2 with 700 font-weight</h2>
<p>This is Paragraph with 400 font-weight</p>
</body>
</html>
|
Font Style
The font style property is used to make the HTML text italic or oblique. The default value is normal.
HTML Font style property example
The example below shows how to use the font style property:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial;
font-weight:bold;
font-size:25px;
}
h2
{
font-family:“Times New Roman”, Arial;
font-weight:600;
font-size:20px;
font-style:italic;
}
p
{
font-family:Arial, Verana;
font-weight:normal;
font-size:15px;
font-style:oblique;
}
</style>
</head>
<body>
<h1>This is heading 1 with normal font style!</h1>
<h2>This is Heading 2 with italic font style</h2>
<p>This is Paragraph with oblique font style</p>
</body>
</html>
|
Learn more about HTML font style in its chapter.
Also see HTML table | CSS font | HTML form
Leave A Comment?