- HTML — Fonts
- Set Font Size
- Example
- Relative Font Size
- Example
- Setting Font Face
- Example
- Specify alternate font faces
- Setting Font Color
- Example
- The Element
- Example
- Example of the <basefont> Element
- HTML Tag
- Syntax
- Example of using HTML tag:
- Result
- CSS Styles
- Example of changing the style of the text with CSS:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- Tag in HTML
- Syntax
- Font Tag Attributes
- How to Use Font Tag in HTML?
- Font Tag Examples
- font tag with font size as x
- font tag where different font sizes are specified
- font tag with different font type & font size
- Browser support
- Conclusion
- Related tags
HTML — Fonts
Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it’s suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.
Set Font Size
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Example
Font size = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"
This will produce the following result −
Relative Font Size
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like or
Example
Font size = "-1"
Font size = "+1"
Font size = "+2"
Font size = "+3"
Font size = "+4"
This will produce the following result −
Setting Font Face
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.
Example
Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock
This will produce the following result −
Specify alternate font faces
A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
Note − Check a complete list of HTML Standard Fonts.
Setting Font Color
You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.
Example
This text is in pink
This text is red
This will produce the following result −
The Element
The element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the settings.
The tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.
Example
This is the page's default font.
Example of the <basefont> Element
This is darkgray text with two sizes larger
It is a courier font, a size smaller and black in color.
This will produce the following result −
HTML Tag
The tag defines the font characteristics. Size, color and typeface are defined by the size , color and face attributes.
Syntax
The tag comes in pairs. The content is written between the opening () and closing () tags.
Example of using HTML tag:
html> html> head> title>Title of the document title> head> body> p> font size="2" color="#1c87c9">Blue text font> p> p> font size="3" color="red">Red text, font size increased. font> p> p> font face="arial" color="#8ebf42">Green text, typeface changed. font> p> body> html>Result
CSS Styles
To change the text color, use the CSS color property instead of the color attribute. CSS font-family or font-face properties replace the face attribute, and instead of the size attribute, the CSS font-size property is used.
Example of changing the style of the text with CSS:
html> html> head> title>Title of the document title> head> body> p style="font-size:16px; color:#1c87c9;">Blue text. p> p style="font-size:18px; color:red;">Red text, font size increased. p> p style="font-size:18px; color:#8ebf42; font-family:arial;">Green text, typeface changed. p> body> html>Attributes
| Attribute | Value | Description |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Sets the color of the text. |
| face | font_family | Sets the typeface. |
| size | number | Sets the size of the text. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
Tag in HTML
The font tag in HTML plays an important role in creating effective, readable, and attractive web pages. font tag in HTML was used in HTML 4 but it got deprecated in HTML5 . font tag in HTML is used to set the font size, color, and face of the text in an HTML document. The font tag in HTML is used inside the tag.
Syntax
The syntax of font tag in html is very simple. We need to open the font tag and provide the size, color, and face values.
The content in between the font tag in HTML gets the specified size , color , and face .
Refer to the below-mentioned article to learn more about different HTML tags. Font syntax
Font Tag Attributes
The font tag in HTML supports all the Global Attributes like accesskey , class , content editable, context menu , data-* , dir, draggable, dropzone, hidden, id, spellcheck, style, and tabindex, title.
Apart from the above-mentioned global attributes, the font tag in HTML has its attributes as well.
Let us learn about the attributes of font tags in HTML in detail.
| Attribute Name | Description |
|---|---|
| color | The color attribute of the font tag in HTML is used to set the color of the text using either hexadecimal values (i.e., # RRGGBB format) or by providing a color name (i.e., black, red, white). |
| size | The size attribute of the font tag in HTML is used to set the size of the tag. The size is expressed as either a numeric or relative value. |
| face | The face attribute of the font tag in HTML is used to set the font to use for text. We can mention one or more font names using a comma. |
Note: In the face attribute of the font tag in HTML, the numeric values range from 1 to 7 . On the other hand, the relative values can be values such as +1 or -2 , increasing by one font size or decreasing by 2 font sizes, respectively.
How to Use Font Tag in HTML?
As we have discussed above, the font tag in HTML is used to set the font size , color , and face of the text in an HTML document. The base font tag is used to set all the text to the same size, color and face.
Note: The font tag in HTML is no longer used. The font tag is deprecated in HTML5, so we can use the CSS properties to change the font size, face, color, font, font-family , font-size, etc. .
Refer to the Examples section to see the working font tag in HTML.
Font Tag Examples
As we now know, the attributes and use case of font tag in HTML. Let us take a few examples to see the working of the font tag in HTML .
font tag with font size as x
The font size attribute of the font tag in HTML is used to adjust the size of the text in the HTML document. The range of size of the font in HTML is from 1 to 7 .
Note: The default size of the font-size attribute is 3.
Output:
font tag where different font sizes are specified
Let us now provide various font sizes in the font tag in HTML to see the working of different font sizes.
Output:
font tag with different font type & font size
Let us take one more example and try to use more than one attribute of the font tag in HTML. In the following example, we are using the font tag with different font types & font sizes.
Browser support
The font tag in HTML is supported by the following browsers:
- Chrome
- Android
- Safari
- Safari Mobile
- Edge (formerly known as Internet Explorer)
- Edge Mobile
- Opera
- Opera Mobile
- Firefox
- Firefox Mobile
Conclusion
- The font tag in HTML is used to set the font size, color, and face of the text in an HTML document. The font tag in HTML is used inside the tag.
- The syntax of font tag in html is very simple : Our Text .
- The font tag in HTML supports all the Global Attributes. Apart from global attributes, the font tag in HTML has three attributes, namely: size, color, and face.
- The font tag in HTML is no longer used. The font tag is deprecated in HTML5 , so we can use the CSS properties to change the font size , face, color , font , font-family , font-size , etc.
- The font tag in HTML is supported by browsers such as Chrome , Android , Safari , Safari Mobile , Edge , Edge Mobile , Opera, Opera Mobile, Firefox, and Firefox Mobile.
Related tags
Learn more about the related tags in HTML:
- HTML tag
- head tag
- title tag
- body tag
- p tag (paragraph tag)
- link tag
- img tag (image tag)
- a tag (anchor tag)
- form tag
Want to learn more about the above-mentioned tags and more? Refer to the article: HTML Tags