CSS Fonts

Font Family

The font-family property sets the typeface. Always include a fallback:

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

Font Size

Use font-size to control text size. Units include:

• px: fixed size (e.g., 16px)
• em: relative to parent
• rem: relative to root
• %: relative to parent

h1 {
  font-size: 32px;
}

Font Weight

The font-weight property defines boldness. Values:

• normal
• bold
• 100 to 900

strong {
  font-weight: bold;
}

Font Style

The font-style property is used to italicize or slant text.

• normal
• italic
• oblique

em {
  font-style: italic;
}

Importing Web Fonts

You can use web fonts like Google Fonts. Either import via CSS:

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

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

Or with a <link> in your HTML:

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

You can explore different fonts that fit your preferences at https://fonts.google.com/

Practice Prompt

Use the Roboto font and apply formatting:

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

<p style={{
  fontFamily: "'Roboto', sans-serif",
  fontSize: "18px",
  fontWeight: "bold",
  fontStyle: "italic"
}}>
  This paragraph uses the Roboto font with custom styling.
</p>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic