logo
HTML Fonts
Implementing @font-face

@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users' computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Verdana and Trebuchet.

Using @font-face

It's easy to use @font-face, you simply include a rule in your style sheet, and reference to the font files almost as you would an image.

Example
<html>
  <head>
    <title>Font Face</title>
  </head>
  <body>
<font face="Arial, Helvetica, sans-serif" size="3">Arial</font><br />
<font face="Comic sans MS" size="4">Comic Sans MS</font><br />
<font face="MS Serif, New York, serif" size="5">MS Serif, New York, serif</font><br />
<font face="Times New Roman" size="6">Times New Roman</font><br />
<font face="Verdana" size="7">Verdana</font><br />
  </body>
</html>
Output :
Arial
Comic Sans MS
MS Serif, New York, serif
Times New Roman
Verdana
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
<html>
    <head>
    <title>Set 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>
Output :
Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
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 <font size="+n"> or <font size="-n">
Example
<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>
Output :
Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"