font-family

lets take a look at the font-family property

font-family is the CSS property that specify the font or the “typeface” for your text element. There are many ways you can add font family, either using what’s already available in your system, or custom fonts that are available online. Then you can set multiple font families at once, so if your browser can’t load the first font, it will try the next one, and so on.

taught by Tina May

font-family can be set with one of the 5 generic font families

You can set a font family without specifying particular font name by using 5 group of generic font-families: sans-serif, serif, monospace, cursive, and fantasy.

font-family:

Tip: Using generic font families means you’re letting the browser to find a suitable font available on the users' computers to use.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

you can use UI system fonts that are different on each operating systems

You can also set a generic font family by using user interface system fonts, basically letting each operating system to load a font based on their own preference.

font-family:

Tip: Using generic font families means you’re letting the browser to find a suitable font available on the users' computers to use.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

You can use a web-safe font that’s built into most browsers

You can use a particular web-safe font that come pre-installed across all operating systems, but they may not be the most visually appealing.

font-family:

Tip: The web-safe fonts are Arial, Times New Roman, Courier New, Verdana, Georgia, Palatino, Garamond, Trebuchet MS and Comic Sans MS.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

You can use a free Google font

You can use one of the 1,400 free Google fonts, which is available here but needs a code snippet that you have to copy and paste to your CSS document first.

font-family:

Tip: Except for generic fonts, it’s recommended that you always put the font family name inside a quote.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

You can use a custom web font as your font-family

You can use any custom web fonts that come in .woff (Web Open Font Format) that are available both paid and free on the internet.

font-family:

Tip: Although regular OpenType fonts (TTF and OTF files) can be used as web fonts, they’re not recommended as the files are significantly larger.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

You can set fallback fonts in case the first font doesn’t load

You can set multiple font families followed by any generic font as a fallback. That way if your browser can’t load the first font, it will try the next one, until it reaches the generic font.

font-family:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <h2>Oh hey guys!</h2>
  <p>What's brewing, good looking?</p>
</div>

Oh hey guys!

What's brewing, good looking?

CSS

/* Change the font family of your heading*/

h2 { font-family: 'Proxima Nova'; }

/* Change the font family of your paragraph*/

p { font-family: 'Open Sans'; }

reults

Try changing the font family of our heading and paragraph below, you can use any generic font-family or you could try one of the built in web-safe fonts from the list below.

We’ve also included the code for 3 custom Google Fonts (Open Sans, Playfair Display and Kanit) for you to play with.

Try these:

Copyright 2023