CSS Fonts:-

The CSS font properties is show the font family, boldness, size, and style of a text in the css.

<style>
p.serif {
  font-family: "Times New Roman", Times, serif;
}

p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
</style>


<h1>Code Family</h1>
<p class="serif">Code Family</p>
<p class="sansserif">Code Family</p>

Font Style:-

The is font-style property is using to show italic text. This three ways:

normal - text is shown normally.

italic - text is shown in italics.

oblique - text is "leaning",

<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>


<p class="normal">This is Code family.</p>
<p class="italic">This is Code family.</p>
<p class="oblique">This is Code family.</p>

Font Size:-

The font-size property is using for the size of the text.

Set Font-Size With Pixels in css

<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>


<h1>This is code family</h1>
<h2>This is code family</h2>
<p>This is a code family</p>
<p>This is code family</p>

Set Font-Size With Em in css

<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>


<h1>Code Fmaily</h1>
<h2>Code Fmaily</h2>
<p>Code Fmaily</p>
<p>Code Fmaily</p>

Font Weight:-

<style>
p.a {
  font-weight: normal;
}

p.b {
  font-weight: lighter;
}

p.c {
  font-weight: bold;
}

p.d {
  font-weight: 900;
}
</style>


<p class="a">This is Code Family</p>
<p class="b">This is a Code Family.</p>
<p class="c">This is a Code Family.</p>
<p class="d">This is a Code Family.</p>

Font Variant:-

<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>


<p class="normal">My name is Code Fmaily.</p>
<p class="small">My name is  Code Fmaily.</p>

CSS Fonts