html
/

CSS Fonts

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Fonts

What are CSS Fonts?

CSS font properties are used to control the appearance of text such as typeface, size, weight, and style.

Font Family

CSSRead-only
1
p {
  font-family: Arial, sans-serif;
}

Font Size

CSSRead-only
1
p {
  font-size: 16px;
}

Font Weight

CSSRead-only
1
p {
  font-weight: bold;
}

Font Style

CSSRead-only
1
p {
  font-style: italic;
}

Font Variant

CSSRead-only
1
p {
  font-variant: small-caps;
}

Font Shorthand

CSSRead-only
1
p {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

Web Safe Fonts

  • Arial
  • Verdana
  • Times New Roman
  • Courier New
  • Georgia

Using Google Fonts

HTMLRead-only
1
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
CSSRead-only
1
body {
  font-family: 'Roboto', sans-serif;
}

Font Properties Overview

PropertyDescription
font-familyFont type
font-sizeText size
font-weightThickness
font-styleItalic/normal
line-heightLine spacing

Best Practices

  • Use fallback fonts
  • Prefer rem/em for scalable fonts
  • Limit number of font families
  • Ensure readability across devices

Common Mistakes

  • Not using fallback fonts
  • Using too many font families
  • Hardcoding font sizes in px
  • Ignoring performance of web fonts

Conclusion

CSS fonts are essential for typography. Proper font selection improves readability and user experience.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which sets font type?

A
font-size
B
font-family
C
font-style
D
font-weight
Q2
of 3

Which sets bold text?

A
font-style
B
font-weight
C
font-size
D
font-family
Q3
of 3

Which improves scalability?

A
px
B
rem
C
cm
D
pt

Frequently Asked Questions

What is font-family?

It defines the typeface used for text.

Why use fallback fonts?

To ensure fonts display if primary font fails.

What is font shorthand?

A single line combining multiple font properties.

Previous

css text

Next

css google fonts

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.