menu
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
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 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 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 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 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 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.
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>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change the font family of your heading*/
h2 { font-family: 'Proxima Nova'; }
/* Change the font family of your paragraph*/
p { font-family: 'Open Sans'; }
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