CSS fonts & Font-Family properties

CSS font Properties:

In this article we will learn how to use CSS to change the values that are the fonts used on web pages. Using some font-face of CSS properties we can modify fonts and font family of the group. Some property of font-face is as follows:

  • Font-family
  • Font-variant
  • Font-size
  • Font-style
  • Font-weight
  • Line-height

We can combine these properties. By doing this, on one hand – Typing takes less time, and on the other hand our styles can be read easily.

CSS topography:

Difference between Serif and Sans-Serif font:

serif font

  • Serif: In case of Serif fonts, there is some additional detail on the end of the main stroke of the letters. These detail strokes are called Serif. To read serif fonts on printed paper is considered convenient.
  • Sans-Serif: For Sans-Serif fonts strokes width is uniform and its straight edge exists. So this font looks quite well. Fonts are divided into two sections for the purpose of splitting one is Generic Family and another is Font family.
  • Generic Family: It is the sum of a set of fonts that homogenous shape. For example: Serif, Sans-Serif, Monospace etc.


It is a group of font series. These fonts are formally homogeneous For example: Times, Verdana, Arial etc.

Generic font family and font-family are mentioned in the table below:

Generic FamilyFont-family
SerifTimes New Roman.
CursiveComic Sans Ms.
MonospacedLucida Console.

CSS font family property:

Font family property is the subject of type face. Each operating system has its own font family. If you want to manually install or import a font. It is important to remember that the font is different from the operating system and font of different browsers is also fixed. So you should use some common fonts. This simple font is called a web safe font. Serif and Sans-serif are two common Web Safe Fonts. You can also use custom fonts.

Font family calls font group. The CSS document’s text is determined by the font family property. You can specify a font of font-family or multiple font names together. But there is a great advantage of mentioning multiple font names, if the browser does not find a font, then the next font will be displayed in the web page. The font-family property contains multiple font names simultaneously. In that case, each font’s name is separated by comma and it is set to declaration.


body{font-family:"Times New Roman", sans-serif;}

Here Times New Roman is Generic font. The name of this font is more than one word in its quotes has been kept inside quotation and sans-serif is the font family name.

Or Syntax:

p{font-family:"Times New Roman";}
p{font-family: impact, Verdana, Tahoma, Helvetica, Arial;}
<p style= "font-family: 'Courier New', Courier, monospace;">.....</p>
font family declaration block 

Example -1: Font-Family property.

HTML Code:

p{font-family: Verdana, Helvetica, Arial, sans-serif;}
<p>Font family property is the subject of type face. Each operating system has its own font family.</p>

Display in Browser:

css font-family

Code Analysis:

Here a paragraph has been created using the <p> <p /> tag inside the <body> </ body> tag and inside the <style> </ style> tag the font-family property is used as a css syntax for that paragraph, which uses the Verdana, Helvetica, Arial, sans-serif fonts as its value. Using P selector <p> tag has been styled inner body tag.

Now copy the code and paste it into any editor software like Notepad, Net Been or Adobe Dreamweaver. Save the file as font.htmt and open the file in the browser. Then you can see the output below.

Another Example:

HTML Code:

<style type="text/css">
p{font-family: fantasy;}
<h1>Font Family-Arial</h1>
<p>Font family property is the subject of type face. Each operating system has its own font family.</p>

Display in Browser:

font-family of css

Here we have used two tags named h1 and p in the <body> tag. Arial font as font-family for h1 tag and the fantasy font are used as a font-family for the <p> tag which you will see if you look at the <style> tag. In this way, any text can be represented with different fonts using CSS syntax’s font property declaration.

Leave a Reply

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