From the course: Responsive Typography Techniques

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Establishing the font stack

Establishing the font stack - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial

Establishing the font stack

In this tutorial we'll show the importance of font stacks in responsive design, and show you how you know you're selecting a good one. Web fonts let us be wonderfully expressive with our type on the web, but it's easy to forget that not all browsers or devices out there actually support them. Responsive design is all about being aware of the expansive device landscape out there, and we need to reflect that in our typographic decisions, too. And that's where font stacks can come into play. So what might make your web font choices not show up? There's the fact that some devices don't support @font-face embedding or may not support the loading of web fonts. Due to the nature of the Internet in general, your web font might time out, there might be a server outage that makes your web font completely unavailable, and in that case, it definitely won't load. And also you might do it on purpose. If you decide to conditionally load your type resources as suggested in this typekit blog article…

Contents