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:
Your text here
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:
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:
your text
Many other font styles are available.
Let’s conclude by an example;

                
                    <!doctype html> 

                    <html> 

                    <body> 

                    <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.
                    </p> 

                    <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.
                    </div> 

                    </body> 

                    </html>

The results will be something like the following:

Trainer Riad Thalji Website

HTML Tutorial

HTML Tutorial

by Trainer Riad Thalji

Working with Fonts

Setting Font Type

Font Color and Weight