CSS Fonts

This property is used to control the look of texts. Choosing the right font and style is very crucial for the readability of text on a page.

CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on.


Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to change the color of the text.

There are three different formats to define a color:

  • By a color name(red, blue)
  • By hexadecimal value (#000, #ccc)
  • By RGB(rgb(0,0,0))
Input:-

Index.html	
<body>
	 <h1>Heading One</h1>
  <h2>Heading Two</h2>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

h1 { color: red; }  
h2 { color: #9000A1; }   
p { color:rgb(0, 220, 98); }  

Output:-


Font Family

This property is used to specify the font to be used to render the text.

This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user’s system, browser tries to use the second one, and so on.

Hence, we should list the font we want first, then any fonts that might fill in for the first if first is not available. We should end the list with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy so that if no font is there, atleast the element will fall in this default font family.

Note: If the name of a font family contains more than one word, it must be placed inside quotation marks, like “Times New Roman”, “Courier New”, “Segoe UI”, etc.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
		font-family: Arial, Helvetica, sans-serif;	   
}

Output:-

The most common font families used in web design are serif and sans-serif, as they are more suitable for reading. While monospace fonts are commonly used to display code, because in this font face each letter takes up the same space which looks like typewritten text.

The cursive font looks like cursive writing or handwriting. The fantasy font represents artistic font, but they are not used widely because of poor availability across the OS.


Font Size

CSS font size property is used to change the size of the font. These are the possible values that can be used to set the font size:

Font Size ValueDescription
xx-smalldisplay the extremely small text size.
x-smalldisplay the extra small text size.
smalldisplay small text size.
mediumdisplay medium text size.
largedisplay large text size.
x-largedisplay extra large text size.
xx-largedisplay extremely large text size.
smallerdisplay comparatively smaller text size.
largerdisplay comparatively larger text size.
size in pixels or %set value in percentage or in pixels.
Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
		font-size: xx-small;	   
}

Output:-

When we are defining font sizes in pixel that is not considered very accessible, because the user cannot change the font size from the browser settings. For instance, users with limited or low vision may wish to set the font size much larger than the size specified by us or may want to enlarge it.

Therefore, we should avoid using the pixels values and use the values that are relative to the user’s default font size instead if we want to create an inclusive design.


Font Style

The font-style property is used to set the font face style for the text content of an element. The font style can be normal, italic or oblique. The default value is normal.

Input:-

Index.html	
   <body>
      <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      <h1>
         This is italic font.
      </h1>
      <h2>
         This is oblique font.
      </h2>
   </body>
Style.css

p {
   font-style: normal;
}
h1 {
  font-style: italic;
}
h2 {
  font-style: oblique;
}

Output:-


Font Variant

This property specifies how to set font variant of an element. It may be normal and small-caps.

Input:-

Index.html	
   <body>
      <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
      <h1>
         This is normal font.
      </h1>
   </body>
Style.css

p {
   font-variant: small-caps;
}
h1 {
  font- variant: normal;
}

Output:-


Font Weight

This property defines the weight of the font and specify that how bold a font is. The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200….. upto 900).

Input:-

Index.html	
   <body>
      <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
   </body>
Style.css

p {
	  font-weight: 600;
}

Output:-


Font Shorthand Property

This shorthand property used to give control styling of any text at once.

Input:-

Index.html	
   <body>
      <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
   </body>
Style.css

p {
	 font: italic small-caps bold 15px georgia;
}

Output:-