• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Fonts Quiz

Q1: Which property sets the font style (italic or normal)?

A. font-weight
B. font-style
C. font-variant
D. font-align

Q2: Which is a valid value for font-weight?

A. 1000
B. bold
C. px
D. italic

Q3: Which property defines the font face used in an element?

A. font-family
B. font-style
C. text-align
D. font-variant

Q4: Which value will apply small caps to the text?

A. uppercase
B. small-caps
C. capitalize
D. transform

Q5: What is the best unit for responsive font sizing?

A. px
B. rem
C. pt
D. cm

Q6: Which of the following is a valid Google Font usage?

A. font-family: 'Roboto', sans-serif;
B. font: google roboto;
C. font-stack: Roboto;
D. @font: Roboto;

Q7: What does the shorthand font property not include?

A. font-style
B. font-weight
C. text-align
D. font-family

Q8: What’s the default font-weight for normal text?

A. bold
B. normal
C. 600
D. lighter

Q9: Which property is used to define spacing between lines?

A. spacing
B. line-height
C. letter-spacing
D. font-line

Q10: What will font-size: 150%; do?

A. Make text smaller
B. Increase font size by 1.5 times
C. Set line height
D. Add margin
← Previous Next →
Login
Go Back Top