• 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 Web Fonts

← Previous Next →

🔹 What Are Web Fonts?

Web Fonts allow websites to use custom fonts that aren't installed on the user's system. These fonts are loaded via the internet using @font-face or font services like Google Fonts.

🔸 Why Use Web Fonts?

  • To ensure consistent typography across all devices

  • To use creative and branded fonts

  • To improve design flexibility without relying on system fonts

🔸 1. Using Google Fonts (Most Popular)

Step 1: Include the Font in <head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Step 2: Use in CSS
body {
  font-family: 'Roboto', sans-serif;
}

🟢 The browser will download Roboto and apply it.

🔸 2. Using @font-face (Custom Fonts)

Example:
@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.woff2') format('woff2'),
       url('fonts/MyFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

p {
  font-family: 'MyFont', sans-serif;
}

🟢 Place the .woff or .woff2 files in the specified folder.

🔸 Font Formats

Format Description
.woff2 Best performance and compression
.woff Widely supported fallback
.ttf Older, larger font format
.eot Used mainly by older IE browsers
.svg Scalable font for legacy devices

🔸 Styling Web Fonts

You can style web fonts using:

font-weight: 400;     /* Normal */
font-weight: 700;     /* Bold */
font-style: italic;

🔸 Best Practices

  • Always include a fallback font.

  • Use only necessary font weights/styles.

  • Host fonts locally for better performance (if needed).

  • Preload critical fonts for fast loading.

Practice Questions

Q1. Apply Google Font Roboto to the whole body.

Q2. Import Google Font Poppins and apply it to headings.

Q3. Use @font-face to load a custom font named MyFont.

Q4. Create a class .fancy using Google Font Dancing Script.

Q5. Use font-weight: 600 for semi-bold text.

Q6. Fallback to Arial if web font fails.

Q7. Use two different fonts for headings and paragraphs.

Q8. Load a .woff2 font and apply it to a .title class.

Q9. Add italic styling to a web font.

Q10. Limit font requests to just one style and one weight.

CSS Web Fonts Quiz

Q1: What is the purpose of Google Fonts?

A. Host images
B. Provide free web fonts
C. Animate text
D. Build navigation

Q2: What CSS rule is used for custom local fonts?

A. @import
B. @font-face
C. @media
D. @font

Q3: Which is a valid font format for web use?

A. .exe
B. .woff
C. .docx
D. .png

Q4: Which font format offers best compression and speed?

A. .ttf
B. .woff2
C. .eot
D. .svg

Q5: What property sets the font type in CSS?

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

Q6: How to load the 'Poppins' font from Google Fonts?

A. @font-face: Poppins
B. <link href="https://fonts.googleapis.com/css2?family=Poppins" ...>
C. @import poppins;
D. font-url: poppins;

Q7: What should you always include when using web fonts?

A. Multiple images
B. Fallback font
C. Data tables
D. Inline scripts

Q8: Which tag is used to apply Google Font in CSS?

A. font-family
B. font-url
C. font-style
D. link

Q9: How can you host fonts locally?

A. Using Google Fonts
B. With @font-face and font files
C. Through CDN only
D. With images

Q10: Which CSS property controls font thickness?

A. font-family
B. font-weight
C. font-style
D. font-variant
← Previous Next →
Login
Go Back Top