How to Change Font in CSS: Simple Guide with Examples

To change the font in CSS, use the font-family property and specify the font name you want, like font-family: Arial;. You can list multiple fonts as a fallback, ending with a generic family like sans-serif.

Syntax

The font-family property sets the font for text in an element. You can list several fonts separated by commas. The browser uses the first available font.

• font-family: The property name.
• font names: Names of fonts in quotes if they have spaces, or without quotes if one word.
• generic family: A fallback like serif, sans-serif, or monospace used if none of the fonts are available.

css

selector {
  font-family: "Font Name", Arial, sans-serif;
}

Example

This example changes the font of a paragraph to use Georgia. If Georgia is not available, it falls back to serif.

css

html {
  font-size: 1.2rem;
}

p {
  font-family: Georgia, serif;
  color: #333333;
}

Output

<p style="font-family: Georgia, serif; color: #333333; font-size: 1.2rem;">This text is shown in Georgia font or a serif fallback.</p>

Common Pitfalls

Common mistakes when changing fonts in CSS include:

• Not providing fallback fonts, which can cause unexpected default fonts.
• Forgetting to quote font names with spaces, like "Times New Roman".
• Using fonts that are not installed on the user's device without web fonts.

Always include generic family names as a last fallback.

css

/* Wrong: missing quotes for font with spaces */
p {
  font-family: "Times New Roman", serif;
}

/* Correct: quotes around font name with spaces */
p {
  font-family: "Times New Roman", serif;
}

Quick Reference

Remember these tips when changing fonts in CSS:

• Use font-family to set fonts.
• List multiple fonts separated by commas.
• Quote font names with spaces.
• Always end with a generic family like serif or sans-serif.
• Use web fonts if you want fonts not installed on user devices.

Key Takeaways

Use the font-family property to change fonts in CSS.

List multiple fonts with commas to provide fallbacks.

Put quotes around font names that have spaces.

Always include a generic font family as the last option.

Fonts not installed on devices need web font services to work.