Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Customizing Colors and Fonts Add Fonts

Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points
Posted by Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points

Css

Please i don't Understand by the meaning of font heading in the fallback?

2 Answers

Dean Wiseman
Dean Wiseman
20,901 Points

The browser will try the first font available, if that one isn't available it will try the next, and so on. In the end it will chose the family serif. A fallback font is the term used to describe the alternative in case the first preferred font is not available. Hopefully I explained that correctly and I'm understanding correctly what it is your asking

Unsubscribed User
Unsubscribed User
5,512 Points
Unsubscribed User
Unsubscribed User
5,512 Points

Hi, Martin.

Like Dean has mentioned, the font-family property should be structured in a way to create a "fallback" system to ensure maximum compatibility between browsers. If the browser does not support the first font, it tries the next and so forth. For example, lets say you wanted to declare a Google serif font (your preferred font) for your main heading and, in the case your preferred font is unavailable, have the heading font fallback to the browsers default serif. First, you would declare your preferred font (say Google Font's 'Playfair Display'), then declare your second choice or "fallback". In this case the font-family declaration would be: 

h1 {font-family: 'Playfair Display', serif;}

This declaration ensures the browser can "fallback" to the browser's default serif and remain readable in the case 'Playfair Display' is unavailable (say Google Font servers are down, etc.). Hope this helps!

Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points
Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points

Thank you for the good explanatory.