CSS Fonts

With CSS font properties we can define the font-family, font-size, font-style, font-weight etc. Here are some of the font properties use in CSS :


1. font-family :

The font-family property is used to change the face of a font. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. Syntax :
 font-family: "Times New Roman", Georgia, "Courier New", Times;
And also note that if the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Example :
<!DOCTYPE>
<html>
<head>
 <title>font-family</title>
 <style>
  p {
  font-family: "Times New Roman", Georgia, "Courier New", Times;
  }
 </style>
</head>
<body>
  <p>Hello world This is The first Paragraph</p>
  <p>Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph


2. font-style :

The font-style property is used to make a font italic, oblique or normal. Example :
<!DOCTYPE>
<html>
<head>
 <title>font-style</title>
</head>
<body>
  <p style="font-style: italic;">Hello world, with italic font style</p>
  <p style="font-style: oblique;">Hello world, with oblique font style</p>
  <p style="font-style: normal;">Hello world, with normal font style</p>
  </body>
</html>
Output :

Hello world, with italic font style
Hello world, with oblique font style
Hello world, with normal font style


3. font-variant :

The font-variant property specifies whether or not a text should be displayed in a small-caps font. 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.

Example :
<!DOCTYPE>
<html>
<head>
  <title>font-variant</title>
</head>
<body>
  <p style="font-variant: small-caps;">Hello world This is The first Paragraph</p>
  <p style="font-variant: normal;">Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph


4. font-weight :

The font-weight property is used to increase or decrease how bold or light a font appears. The possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Example :
<!DOCTYPE>
<html>
<head>
  <title>font-weight</title>
</head>
<body>
  <p style="font-weight: bold;">Hello world This is The first Paragraph</p>
  <p style="font-weight: bolder;">Hello world This is The Second Paragraph</p>
  <p style="font-weight: lighter;">Hello world This is The Third Paragraph</p>
  <p style="font-weight: 900;">Hello world This is The Third Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph
Hello world This is The Third Paragraph
Hello world This is The Third Paragraph


5. font-size :

The font-size property is used to increase or decrease the size of a font. The possible values could be xx-small, x-small, small, large, x-large, xx-large, smaller, larger or size in pixels. Example :
<!DOCTYPE>
<html>
<head>
<title>font-size</title>
</head>
<body>
  <p style="font-size: xx-small;">Hello world This is The first Paragraph</p>
  <p style="font-size: small;">Hello world This is The Second Paragraph</p>
  <p style="font-size: xx-large;">Hello world This is The Third Paragraph</p>
  <p style="font-size: 20px;">Hello world This is The Third Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph
Hello world This is The Third Paragraph
Hello world This is The Third Paragraph


Next Topic :