When styling text on a webpage, one of the most fundamental choices is which font to use. Fonts affect readability, brand identity, and the overall user experience. In CSS, the property used to define the font family of an element’s text is:
font-family
The CSS Property: font-family
The font-family
property specifies the typeface that should be used for the text content of an element.
Syntax:
selector {
font-family: "Font Name", fallback-font, generic-family;
}
selector
: The HTML element you’re targeting (e.g.,body
,h1
,.paragraph
).Font Name
: The primary font you want to use (e.g.,"Roboto"
,"Georgia"
).fallback-font
: Alternative fonts if the primary is unavailable.generic-family
: General font category (e.g.,serif
,sans-serif
,monospace
).
Example:
<p class="text">This is a paragraph with custom font.</p>
.text {
font-family: "Helvetica Neue", Arial, sans-serif;
}
This will display the text using Helvetica Neue if available, otherwise Arial, and finally a generic sans-serif font.
Font Stacks and Fallbacks
Because not all users have the same fonts installed, it’s good practice to define a font stack—a list of fonts in order of preference.
Example:
body {
font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
}
If "Open Sans"
isn’t available, the browser will try "Segoe UI"
, then Tahoma
, and finally any available sans-serif
font.
Adding Custom Fonts
To use a custom font (e.g., from Google Fonts), you can import it:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Then apply it using CSS:
body {
font-family: "Roboto", sans-serif;
}
Related Font Properties
font-size
: Controls the size of the text.font-weight
: Sets the boldness.font-style
: Sets normal, italic, or oblique styles.line-height
: Adjusts vertical spacing between lines.font
: A shorthand for setting multiple font properties at once.
Summary
To define the font of an element’s text in CSS, use the font-family
property:
font-family: "Your Font", fallback, generic-family;
This property gives you full control over typography and ensures your design remains consistent and readable across browsers and devices.