font

lets take a look at the font property

font is the CSS property that we use to specify the font or the “typeface” for your text element. This is actually a shorthand for the following properties: - font-style - font-weight - font-size (required) - line-height - font-family (required)

taught by Tina May

you can use font property to declare just the font-size and font-family in one go

You can use font as a shorthand to declare just the required properties, which are font-size and font-family.

font:

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. 5 group of generic font-families are: sans-serif, serif, monospace, cursive, and fantasy.

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

you can declare font-size, font-family and line-height at once

You can also add line-height to the declaration by putting the value immediately after font-size and preceded by a slash (/)

font:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

you can declare all accepted properties at once

You can also add font-style and font-weight to the declaration and putting all accepted properties in one go.

font:

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>
  <p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
  <p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
  <p class="style-3">You miss 100% of the shots you never take.</p>
</div>

Tuition is valuable. But you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

CSS

/* Change the style of the first paragraph*/

.style-1 { font: 17px 'Playfair Display', serif; }

/* Change the style of the second paragraph*/

.style-2 { font: italic 700 18px/1.4 'Open Sans', sans-serif; }

/* Change the style of the third paragraph*/

.style-3 { font: 600 18px 'Kanit', sans-serif; }

reults

Try changing the font shorthand’s value of each of the following elements, below we’ve put 3 paragraphs with a class of ‘style-1’ ‘style-2’ and ‘style-3’. 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) with 400, 600 & 800 weights in regular and italic styles for you to play with.

Try these (or anything else!):

Copyright 2023