menu
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 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 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 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.
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.
<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.
/* 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; }
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