CSS Web Fonts

Web fonts are fonts that you can embed into your web page, giving you more design freedom. Instead of relying on default system fonts, you can use custom fonts from services like Google Fonts or Adobe Fonts, ensuring consistency across devices and browsers.

📐 Syntax:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

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

🧪 Live Example:

🔧 Common Properties:

• @import → Imports the font from an external source like Google Fonts.
• font-family: → Defines the font used for the text (e.g., 'Roboto', sans-serif).
• font-weight: → Controls the thickness of the font (e.g., 400 for normal, 700 for bold).
• font-size: → Sets the size of the font.

📱 Responsive Layout Tip:

When using web fonts, it's best to keep your font sizes flexible. Use relative units like em or rem instead of fixed pixel sizes to ensure better responsiveness across different screen sizes.