Working with Fonts

  • Fonts type and styles are defined with the style attribute.
  • If Non-English text will be used, the HTML document need to be set to use utf-8 Character Set.
  • Please see the Descriptive Tags in section in this tutorial to find how to set the character set in the document.
  • Utf-8, means that the browser need to expect Unicode characters representation method which can represent characters and symbols from any language.


Setting Font Type

  • Font types can be set by the style attribute, like in the following example:
    <p style="font-family: 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, 'sans-serif'">Your text here</p>
  • Notice that HTML authors usually specify a set of fonts in the font family attribute so that the browser will find an alternative in case the client does not have the needed font installed.
  • Like all style attributes, font styling can be done in any tag that may include text.

Font Color and Weight

  • Like font-family, font color and weight can be set as a style attribute.
  • Font color is simply set by the color attribute; like for example:
    <p style=”color: gray”>your text here</gray>
  • Font weight is also defined as a style attribute, for example if we want to make our text bold, we write:
    <p style=”font-weight: bold”>your text</p>
  • Many other font styles are available.
  • Let’s conclude by an example;
<!doctype html>   
    <h1>Font Examples</h1>
    <p style="font-family: 'Gill Sans', 'Myriad Pro'; font-weight: bold; font-size: 20px; color: darkgoldenrod">
    This paragraph is displayed in Gill Sans font, however if the browser does not support Gill Sans, 
    the alternative is Myriad Pro, and the text will be bold with a size of 20px and a golden color.
    <div style="background-color: olive; color:white; font-weight: bold; font-size: 30px; 
        font-family: Constantia, 'Georgia, 'serif'">
        In this <div> I'm using an olive color for the background, a white color for the font itself, 
        a bold weight, a 30px font size, and a Georgia font type, with the alternative serif.

The results will be something like the following:

HTML Fonts Example