It is an important aspect of any web design to choose the right font for the web page. The use of Google fonts is

advantageous because we get elegant fonts for our website. The Google fonts API makes it easier and quicker for

everyone to use web-fonts. These fonts have been tested on various browser configurations.

Instead of doing any programming, we simply have to add a special style sheet link to our HTML document, then refers to

the font family of our choice in the CSS style.

CSS font Property

The font property is a shorthand property for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

The font-size and font family values are required. If one of the other values is missing, their default value are used.

The line-height property sets the space between lines.

Example

Set some font properties with the shorthand declaration:

p.a {
  font: 15px Arial, sans-serif;
}

p.b {
  font: itlaic small-caps bold 12px/30px Georgia, serif;
}

CSS font-family Property

The font-family property specifies the font for an element.

The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

• family-name- The name of a font-family, like “times”, “courier”, “arial”, etc.
• generic-family- The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Separate each value with a comma.

If a font name contains white-space, it must be quoted. Single quotes must be used when using the “style” attribute in HTML.

Example

Specify the font for two paragraphs:’

p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

CSS font-style Property

The font-style property specifies the font style for a text.

Example

Set different font styles for three paragraphs:

p.a {
   font-style: normal;
}

p.b {
  font-style: italic;
}

p.c {
  font-style: oblique;
}

CSS font-variant Property

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters

appears in a smaller font size than the original uppercase letters in the text.

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

Example

Set a paragraph to a small-caps font:

p.small {
    font-variant: small-caps;
}

CSS font-weight Property

The font-weight property sets how thick or thin characters in text should be displayed.

Example

Set different font weight for three paragraphs:

p.normal {
   font-weight: normal;
}

p.thick {
   font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

CSS font-stretch Property

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch

property to select a normal, condensed, or expanded font face.

This property has no effect if the selected font does not offer condensed or expanded faces!

Example

Make the text in <div> elements wider:

div {
   font-family: sans-serif, "Helvetica Neue", "Lucida Grande:, Arial;
   font-stretch: expanded;
}

CSS font-size Property

The font-size property sets the size of a font.

Example

Set the font size for different elements:

div.a {
   font-size: 15px;
}

div.b {
   font-size: large;
}

div.c {
   font-size: 150%;
}

CSS font-size-adjust Property

The font-size-adjust property in CSS is used to adjusts the font size based on the height of lowercase rather than capital

letters and gives the better control of the font size. It is very useful when the text has given multiple styles and has adjust the

font while changing in between those styles.

Syntax:

font-size-adjust: number|none|initial|inherit;

Default Value:

• none

Property values:

• number: It sets the number to the font-size-adjust property.
• none: It sets the default value.
• initial: It Sets the font-size-adjust property to its default value.
• inherit: The font-size-adjust property is inherited from its parent.

Example

HTML

<!DOCTYPE html>
<html>
<head>
<title>
   CSS font-size-adjust property
 </title>
 
 <style>
  .CO1 {
 font-family: Times, serif;
  }
            
 .CO2 {
  font-family: Verdana, sans-serif;
  }
          
  div {
  font-size-adjust: 0.58;
           }
  </style>
   </head>

   < body>
   <h1> CodeOne</h1>

   <h2>
     CSS font-size-adjust property
   </h2>

  <p class= "CO1">
    CodeOne: A computer science portal for codeone
   </p>

   <p class= "CO2">
    Codeone: A computer science portal for codeone
   </p>

   </body>
   </html>


 

Output: