HTML - Fonts
What are HTML Fonts
Fonts play a very important role in making a website more user-friendly and increasing content readability. Font face and color depend entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The Font Tag has 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 <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> 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 the content font size using the size attribute. The range of values that are accepted is from 1(smallest) to 7(largest). The default size of a font is 3.
Example
<!DOCTYPE html> <html> <head> <title>Setting Font Size</title> </head> <body> <font size = "1">Font size = "1"</font><br /> <font size = "2">Font size = "2"</font><br /> <font size = "3">Font size = "3"</font><br /> <font size = "4">Font size = "4"</font><br /> <font size = "5">Font size = "5"</font><br /> <font size = "6">Font size = "6"</font><br /> <font size = "7">Font size = "7"</font> </body> </html>
The above code will be displayed as:
Relative Font Size
You can set how many sizes larger or how many sizes smaller than the default font size should be. You can specify by doing <font size = "+n"> or <font size = "−n">
Example
The below code is the proper code syntax on how to use relative font-size:
<!DOCTYPE html> <html> <head> <title>Relative Font Size</title> </head> <body> <font size = "-1">Font size = "-1"</font><br /> <font size = "+1">Font size = "+1"</font><br /> <font size = "+2">Font size = "+2"</font><br /> <font size = "+3">Font size = "+3"</font><br /> <font size = "+4">Font size = "+4"</font> </body> </html>
The above code will be displayed as:
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, the user will see the default font face applicable to the user's computer.
Example
<!DOCTYPE html> <html> <head> <title>Font Face</title> </head> <body> <font face = "Times New Roman" size = "5">Times New Roman</font><br /> <font face = "Verdana" size = "5">Verdana</font><br /> <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br /> <font face = "WildWest" size = "5">WildWest</font><br /> <font face = "Bedrock" size = "5">Bedrock</font><br /> </body> </html>
The above code will be displayed as:
Specify alternate font faces
A user will only be able to see your font if they have that particular font already installed on their computer. So, it is possible to set two or more font face alternatives by just inputting the font face names, separated by a comma.
<font face = "arial,helvetica"> <font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
When your web page is loaded, their web browser will render the first font face that is available. If none of the given fonts that you have specified are installed, then it will automatically display the default font face Times New Roman.
Setting Font Color
You can set the color of your font when displayed by using the color attribute inside the <font> tag. You can also specify the color that you want by using either the name of the color or the hex code for that particular color.
Example
<!DOCTYPE html> <html> <head> <title>Setting Font Color</title> </head> <body> <font color = "#FF00FF">This text is in pink</font><br /> <font color = "red">This text is red</font> </body> </html>
The above code will be displayed as:
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
