fbpx
April 2, 2020
html fonts

Tutorial #20 Learn About HTML Fonts, How Create and to Use Them

In this tutorial we will be looking at HTML fonts. Fonts are just the way words letters are represented on the HTML web page. The type of fonts you make use of on your web page matters a lot and also determines the readability and beauty of your web page. The fonts on Web pages can be styled using the <font> tag but this happens to be inline styling and is not supported by the current version of HTML. The current version of HTML requires you to style your fonts using Cascading style sheet (css).

Read the previous tutorial on: Tutorial #19 Learn About HTML Colors and How to Use Them

Despite inline font styling not been supported by the current HTML, we are still going to commence with learning it for the main purpose of gaining knowledge.

We can set different sections of the web page to different font styles, sizes and font colors. We can also set a base font using the <basefont> tag which gives the webpage a single font style.

Setting Font Size

Let’s look at how to set font sizes inside the <font> tag. We can easily do this by placing the size attribute inside the font tag.  Example shown below

please note that font allow the range of values 1-7 during sizing and the default fault value is 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes </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>

RESULT ON WEB BROWSER

Adding Font Sizes using relatives

We can also move further to adding font sizes to HTML web pages by using the relatives. For example we can set a font increase from -n to +n. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes using relatives</title>
   </head >
	
   <body>

      <font size="-1"> font size 1 </font> <br>
      <font size="+1">  font size 2</font> <br>
      <font size="+2"  >  font size 3 </font> <br>
      <font size="+3"> font size 4 </font> <br>
      <font size="+4"  >  font size 5 </font> <br>
      <font size="+5"  >  font size 6 </font> <br>
      <font size="+6"  >  font size 7 </font> 


   </body>
   
</html>

RESULT ON WEB BROWSER

Setting the font face

We can set the font face to any font face using the face attribute placed inside the <font> tag as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes using relatives</title>
   </head >
	
   <body>

      
      <font face="Times New Roman">  font Times New Roman</font> <br>
      <font face="Bedrock"> font face Bedrock </font> <br>
      <font face="WildWest"  >  font face WildWest </font> <br>
      
   </body>
   
</html>

RESULT ON WEB BROWSER

html fonts

Alternative Font faces

For your font to display properly on a web page the web browser needs to support that font face. To avoid having issues with font faces we can setup alternative font faces for the web browser to pick from. example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes using relatives</title>
   </head >
	
   <body>

      
      <font face="Times New Roman,Bedrock WildWest,">  font Times New Roman</font> <br>
      
      
   </body>
   
</html>

Setting HTML font color

We can set the HTML font color using color HTML attribute. We add the color attribute inside the opening tag of the font tag as shown below.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes using relatives</title>
   </head >
	
   <body>

      
         <font color="green">  font color green</font> <br>
         <font color="yellow">  font color yellow</font> <br>
         <font color="red">  font color red</font> <br>
         
      
      
   </body>
   
</html>

RESULT ON WEB BROWSER

html font colors

Adding Base font to Web Document

we can add a base font to a web document using the HTML base font element <basefont>. This base font helps us specify a a font size, color and face for the entire web document. But this can be over ridden using the <font> tag. Check out the example below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Font Sizes using relatives</title>
   </head >
	
   <body>
      <basefont size="10" color="#ff0000" face="WildWest">

      
         <font color="green">  font color green</font> <br>
           <p>font color yellow </p>
         <font color="red">  font color red</font> <br>

         </basefont>
         
      
      
   </body>
   
</html>

Conclusion

Now you understand the basics of HTML FONTS and you are really doing great. Lets move on to the next tutorial on HTML FORMS

Leave a Reply

Your email address will not be published. Required fields are marked *