Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login

CSS Fonts

CSS Fonts allow you to control the appearance of text on a webpage. You can change the font family, size, style, weight, and other font-related properties to improve readability and design.

1. Introduction to CSS Fonts

Fonts play an important role in web design. A good font improves readability and gives your website a professional look.

Common CSS Font Properties
  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant
  • font (Shorthand)

p{

    font-family:Arial, sans-serif;

    font-size:18px;

}
Selecting the right font improves readability and enhances the overall appearance of a website.

2. font-family Property

The font-family property specifies the typeface used to display text. 


h1{

    font-family:"Times New Roman", serif;

}
Common Font Families
Font Family Category
Arial Sans-serif
Verdana Sans-serif
Times New Roman Serif
Georgia Serif
Courier New Monospace 

body{

    font-family:Verdana, sans-serif;

}
Always specify a generic font family such as serif, sans-serif, or monospace as a fallback.

3. font-size Property

The font-size property controls the size of text. 


p{

    font-size:20px;

}
Unit Description
px Fixed font size.
em Relative to the parent element.
rem Relative to the root element.
% Percentage of the parent font size. 

h2{

    font-size:2rem;

}
Use rem or em for responsive typography.

4. font-style Property

The font-style property specifies whether text is normal, italic, or oblique. 


p{

    font-style:italic;

}
Value Description
normal Default text style.
italic Italic text.
oblique Slanted text. 

em{

    font-style:italic;

}
Italic text is commonly used for quotations, emphasis, and book titles.

5. font-weight Property

The font-weight property controls the thickness (boldness) of text. 


h1{

    font-weight:bold;

}
Value Description
normal Normal font weight (400).
bold Bold font weight (700).
bolder Bolder than the parent element.
lighter Lighter than the parent element.
100–900 Numeric font weights. 

.title{

    font-weight:700;

}
Use bold text to highlight important headings and key information without overusing it.

6. font-variant Property

The font-variant property controls whether text is displayed in normal form or small capital letters. 


p{

    font-variant:small-caps;

}
Value Description
normal Displays normal text.
small-caps Displays lowercase letters as small capital letters. 

h2{

    font-variant:small-caps;

}
Small caps are commonly used in headings, titles, and decorative text.

7. Google Fonts

Google Fonts provides hundreds of free fonts that can be used in websites.

Step 1: Import the Font

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
Step 2: Use the Font

body{

    font-family:'Roboto', sans-serif;

}
Popular Google Fonts Category
Roboto Sans-serif
Poppins Sans-serif
Open Sans Sans-serif
Lato Sans-serif
Merriweather Serif
Google Fonts improve website typography and offer excellent browser compatibility.

8. Web Safe Fonts

Web safe fonts are fonts that are commonly installed on most operating systems and browsers.

Font Category
Arial Sans-serif
Verdana Sans-serif
Tahoma Sans-serif
Georgia Serif
Times New Roman Serif
Courier New Monospace 

body{

    font-family:Arial, Helvetica, sans-serif;

}
Always include a generic fallback font such as serif, sans-serif, or monospace.

9. Font Shorthand Property

The font property combines multiple font properties into a single declaration. 


p{

    font:italic bold 18px Arial, sans-serif;

}
Property Included Example
font-style italic
font-weight bold
font-size 18px
font-family Arial
The font-size and font-family values are required when using the shorthand property.

10. Practical Font Examples

Example 1: Website Heading

h1{

    font-family:'Poppins', sans-serif;

    font-size:36px;

    font-weight:bold;

}
Example 2: Paragraph

p{

    font-family:Georgia, serif;

    font-size:18px;

    line-height:1.8;

}
Example 3: Logo

.logo{

    font-family:'Roboto', sans-serif;

    font-size:32px;

    font-weight:700;

    letter-spacing:3px;

}
Example 4: Navigation Menu

nav a{

    font-family:Verdana, sans-serif;

    font-size:16px;

    font-weight:600;

}
Selecting the appropriate font style and size improves readability and creates a professional website design.

11. CSS Fonts Best Practices

Choosing the right fonts improves readability, accessibility, and gives your website a professional appearance.

  • Use easy-to-read fonts for body text.
  • Limit your website to two or three font families.
  • Always specify a generic fallback font.
  • Use responsive font sizes with rem or em.
  • Maintain sufficient contrast between text and background.
  • Use bold text only for important headings.
  • Keep font sizes consistent throughout the website.
  • Use Google Fonts only when necessary to reduce loading time.
Good typography improves user experience and makes content easier to understand.

12. Common Font Mistakes

Mistake Correct Practice
Using too many font families. Use two or three font families only.
Very small font size. Use readable font sizes.
No fallback font. Add a generic font family.
Using bold everywhere. Use bold only for emphasis.
Poor color contrast. Choose colors that improve readability. 

❌ Incorrect

body{

    font-family:Font1, Font2, Font3, Font4;

    font-size:10px;

}

✔ Better

body{

    font-family:Arial, sans-serif;

    font-size:16px;

}
Poor typography can make a website difficult to read and reduce the user experience.

13. Browser Support

CSS font properties are fully supported by all modern browsers.

Browser Support
Google Chrome ✔ Supported
Mozilla Firefox ✔ Supported
Microsoft Edge ✔ Supported
Safari ✔ Supported
Opera ✔ Supported
You can safely use CSS font properties in all modern web browsers.

14. CSS Fonts Interview Questions

  1. What is the purpose of the font-family property?
  2. What is the difference between px, em, and rem?
  3. What does the font-style property do?
  4. Explain the font-weight property.
  5. What is the use of the font-variant property?
  6. What are Google Fonts?
  7. What are Web Safe Fonts?
  8. What is the CSS font shorthand property?
  9. Why should a fallback font be specified?
  10. How can responsive typography be achieved in CSS?
These questions are frequently asked in HTML & CSS interviews and practical examinations.

15. Lesson Summary

In this lesson, you learned:
  • ✔ Introduction to CSS Fonts.
  • ✔ font-family Property.
  • ✔ font-size Property.
  • ✔ font-style Property.
  • ✔ font-weight Property.
  • ✔ font-variant Property.
  • ✔ Google Fonts.
  • ✔ Web Safe Fonts.
  • ✔ Font Shorthand Property.
  • ✔ Practical Font Examples.
  • ✔ Best Practices and Common Mistakes.
Congratulations! You have successfully completed the CSS Fonts lesson. You can now style text using different font families, sizes, weights, styles, and web fonts to create attractive and professional web pages.

Quick Quiz

Which CSS property specifies the typeface used for text?





← Previous Next →