Smal SEO Tool
« CSS TextCSS Icons »

CSS Fonts

Choosing the right font for your website is crucial for readability and branding. CSS provides several properties to control fonts.

font-family

The font-family property specifies the font for an element. You can provide a list of fonts (a "font stack") as a fallback system. If the browser does not support the first font, it tries the next one, and so on.

Example

css
p {
  font-family: "Times New Roman", Times, serif;
}
Try it Yourself »

font-style

The font-style property is mostly used to specify italic text. It can have values of normal, italic, or oblique.

Example

css
.italic { font-style: italic; }
Try it Yourself »

font-weight and font-size

The font-weight property specifies the weight or boldness of the font (e.g., normal, bold, or a number like 700). The font-size property sets the size of the text.

Example

css
p {
  font-weight: bold;
  font-size: 18px;
}
Try it Yourself »

Using Google Fonts

Google Fonts offers a vast library of free-to-use web fonts. To use them, you add a stylesheet link in your HTML's <head> section and then refer to the font name in your CSS.

Example (HTML)

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

Example (CSS)

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

Test Yourself with an Exercise

Which property is used to change the text to bold?

« CSS TextCSS Icons »