• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Fonts

← Previous Next →

🔹 What is CSS Font Styling?

Fonts in CSS are styled using several properties like font-family, font-size, font-weight, font-style, line-height, and more. These properties define how the text appears on your webpage.

🔸 Common CSS Font Properties

Property Description
font-family Specifies the font name(s)
font-size Sets the size of the font
font-weight Sets how thick or thin the text appears
font-style Defines italic, normal, or oblique style
font-variant Sets small-caps or normal
line-height Controls the space between lines
font (shorthand) Sets multiple font properties at once

🔸 1. font-family

Defines which font to use. Always include fallback fonts.

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

🟢 If Arial is not available, Helvetica will be used, and then any sans-serif font.

🔸 2. font-size

Controls the size of the text. Use units like px, em, rem, %.

h1 {
  font-size: 32px;
}

🟢 em and rem are scalable and preferred for responsive design.

🔸 3. font-weight

Sets the thickness of the font.

strong {
  font-weight: bold;   /* or 700 */
}

Common values: normal, bold, lighter, bolder, or numeric 100 – 900.

🔸 4. font-style

Used to make text italic or oblique.

i {
  font-style: italic;
}

🔸 5. font-variant

Used for small-caps effect.

p {
  font-variant: small-caps;
}

🔸 6. line-height

Controls spacing between lines of text.

p {
  line-height: 1.6;
}

🔸 7. font (Shorthand)

Allows setting multiple font properties in one line.

p {
  font: italic bold 16px Arial, sans-serif;
}

Format:

font: [font-style] [font-weight] [font-size]/[line-height] [font-family];

🔸 Using Google Fonts

You can include custom fonts from Google Fonts.

🔹 Example:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

Practice Questions

Q1. Apply Arial font with fallback sans-serif to all paragraphs.

Q2. Make all <h1> headings bold and 36px in size.

Q3. Set body font to Roboto using Google Fonts.

Q4. Set font size using em for responsive scaling.

Q5. Apply italic style to all <em> tags.

Q6. Use font-variant to display text in small caps.

Q7. Combine font properties using shorthand.

Q8. Make .title class use a font-size of 2rem.

Q9. Apply Times New Roman to a specific div.

Q10. Change the font-weight of <strong> tags to 900.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top