CSS – Fonts


CSS – Font


”;


Previous

Next

CSS Fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS.


What is CSS Font?

In CSS font property is used to style and adjust type of text used in webpage.

You can define fonts and customize their appearance by setting properties like font-family, font-size, font-weight and font-style. You can also use shorthand property font to manipulate all the font style.


Table of Contents



 

Types of Font Families

  • Monospace Fonts: The font in which every letter have equal width.

  • Serif Fonts: Have small stroke at the edge of each letter.

  • San-Serif Fonts: Clean fonts with out any strokes.

  • Fantasy Fonts: Decorative fancy fonts.

  • Cursive Fonts: The font that resembles human handwriting.



Popular CSS Fonts












 

CSS Font Family Property

The font-family property is used to specify font name for a text content.

Syntax


selector {
      font-family: family-name, generic-family;
}


Example

Here is the example using font-family property. 


<html>
<head>
    <style>
        p {
            font-family: Lucida Handwriting, Cursive;
        }
    </style> 
</head>

<body>
    <p >
        This is a font that written in Lucida 
        Handwriting. THis is a font that looks 
        like human handwriting.
    </p>
</body>
</html>


Adjust Font Weight, Size and Style

In CSS we can use font-size, font-weight and font-style. properties to modify size, weight and style of texts.

Example

Let”s check an example for this.


<html>
<head>
    <style>
        .font-size-example {
            font-size: 20px; 
        }

        .font-weight-example {
            font-weight: bold; 
        }

        .font-style-example {
            font-style: italic; 
        }
    </style>
</head>

<body>
    <p class="font-size-example">
        This is an example of text with an 
        adjusted font size.
    </p>

    <p class="font-weight-example">
        This is an example of text with an 
        adjusted font weight.
    </p>

    <p class="font-style-example">
        This is an example of text with an 
        adjusted font style.
    </p>
</body>
</html>


CSS Font Shorthand Property

In CSS we can use the font shorthand property to modify size, weight, and style of texts.


Example

In this example we will use font shorthand property to set font style, weight, size and family. 


<html>
<head>
    <style>
    .font-example {
        /* in-order: font style, weight, size, family */
        font: italic bold 20px Arial, sans-serif; 
    }
    </style>
</head>

<body>
    <p class="font-example">
        This is an example of text with an adjusted 
        font style, weight, and size using the font 
        shorthand property.
    </p>
</body>
</html>


Following is the list of all the CSS properties related to font:

Generic Font Family Examples of Font Names
Serif Times New Roman

Georgia

Garamond
Sans-serif Arial

Verdana

Helvetica
Monospace Courier New

Lucida Console

Monaco
Cursive Brush Script MT

Lucida Handwriting
Fantasy Copperplate

Papyrus
















Property Description Example
font-family Specifies the font for an element.

font-size Specifies the size of the font.

font-weight Specifies the boldness of the font.

font-style Specifies the style of the font (normal, italic, oblique).

font-variant Specifies whether or not a text should be displayed in a small-caps font.

line-height Specifies the line height.



Print Page




Previous



Next


Advertisements

”;





Leave a Reply

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