CSS3 > Font

Font styling in CSS3

How to use Font properties using font method in CSS


Font is used to change style of the text using different font properties

  • Font-size
  • Font-family
  • font-style
  • font-weight
  • font-variant 

Font size

It changes the size of the text using property font size

    <p style="font-size:30px">TechFunda</p>

In the above code snippet we have fontsize with 30px which changes the height of the text by 30px


Font style

It changes the style of font

    <p style="font-style:inherit">TechFunda</p>
    <p style="font-style:initial">TechFunda</p>
    <p style="font-style:italic">TechFunda</p>
    <p style="font-style:normal">TechFunda</p>
    <p style="font-style:oblique">TechFunda</p> 


In the above code snippet we have defined font style with initia, inherit, italic, normal, oblique



It changes the style of the text

    <p style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">TechFunda</p>
    <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">TechFunda</p>
    <p style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">TechFunda</p>
    <p style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">TechFunda</p>
    <p style="font-family:'Times New Roman', Times, serif">TechFunda</p> 

Font family

In the above code snippet we have defined the font family to define the style by giving different values in the style


Font weight

It changes text to bold and normal letters

    <p style="font-weight:bolder">TechFunda</p>
    <p style="font-weight:bold">TechFunda</p>
    <p style="font-weight:normal">TechFunda</p>
    <p style="font-weight:initial">TechFunda</p>

Font weight

In the above code snippet we have font weight as bold and normal letters 


Font variant

It changes the text to small caps and capital letters

<p>Font variant</p>
    <p style="font-variant:normal">Techfunda</p>
    <p style="font-variant:small-caps">TechFunda</p>

Font variant

In the above code snippet we have defined font variant to change text to small and capital letters


 Views: 3325 | Post Order: 137

Write for us

Hosting Recommendations