Smashing Newsletter #280: Web Font Loading

With local fonts compatibility, Google Fonts performance and Fighting FOUT. Issue #280 Tue, Dec. 22, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

This has been a year of change for many of us, myself included, and I write this introduction as my last as Editor in Chief of Smashing Magazine. I want to be able to fully concentrate on my web platform work in 2021 and in producing more materials to teach folk HTML and CSS — so watch this space!

I have really enjoyed my time at Smashing and have many great memories. I’ve loved being able to publish more new voices on the magazine, and being able to work with folk who haven’t written for a publication before. In the last year alone over 70 of our authors were new to Smashing, many of them new to being paid for their writing and the editorial process that goes with it.

It was incredible seeing the conference side of the business spring into action when it became apparent we wouldn’t be able to run our in-person conferences this year. Within days we had a new plan, were promoting our successful online workshops and looking to take the events online. I’m very glad to have been a small part of it.

I’ll miss the behind the scenes team headed up by Iris, who make sure that articles get published each day and so much more, and my group of subject matter editors who have found and worked with writers covering all of the different facets of web design and development.

All that is left to say is Happy Holidays to all of you who are celebrating at this time of year. I know this will be a difficult one for many people, and however you are spending holiday days, I hope for some rest and peace from this difficult year. We can hope together for a better 2021.

Rachel Andrew, signing out as Editor in Chief of Smashing Magazine


Table of Contents

1. Default Local Fonts Compatibility
3. A Comprehensive Guide To Web Font Loading Strategies
4. New Front-End & UX Workshops
5. Improving Google Fonts Performance
6. Fight FOUT And Make Lighthouse Happy
7. New On Smashing Job Board
8. Our Current Most Popular Articles

1. Default Local Fonts Compatibility

Default fonts vary significantly across different operating systems. To provide an easy way to look up a system’s default fonts, especially the ones that need to be available through CSS font-family, Zach Leatherman built Font Family Reunion.

Font Family Reunion

The compatibility table works like a Can I Use for default local fonts: Once you enter a font-family, it will tell you if it is supported, as well es what the five standard CSS keyword font-families (serif, sans-serif, monospace, and the lesser known fantasy and cursive) are aliased to in each operating system. One for the bookmarks. (cm)


2. Font Style Matcher To Prevent Layout Shifts

When using a web font, you’ll often need to deal with the flash of unstyled text that happens between the initial render of your web-safe font and the web font you’ve chosen. To prevent layout shifts, it’s a good idea to choose the fallback font in relation to the web font’s x-heights and widths. The better they match, the less jarring the layout shift will be.

Font Style Matcher

Monica Dinculescu’s Font Style Matcher helps you minimize the discrepancy between the fallback font and the web font. Once you’ve entered the fonts into the tool, you can use the sliders to adjust font size, line height, font weight, letter spacing, and word spacing and, as you do so, compare the two fonts side by side as well as overlapped. A fantastic little helper. (cm)


3. A Comprehensive Guide To Web Font Loading Strategies

FOUT with a class, critical FOFT, preload — let’s be honest, font loading can be confusing. To help you decide which approach is the right one for your project’s needs, Zach Leatherman put together a comprehensive guide to font loading strategies.

A Comprehensive Guide To Web Font Loading Strategies

The guide does not only cover how the different strategies work but it also looks into the pros and cons of each one of them. Shortcuts make it easy to find the best approach based on your expectations — the approach that is the easiest to implement, for example, or the one that offers the best performance. If you want to dive deeper into the code of each solution (and some more experimental ones, too), Zach’s Web Font Loading Recipes repo on GitHub has got you covered. (cm)


4. New Front-End & UX Workshops

Let's fix those front-end bugs! Our online workshops have been an incredible experience with wonderful folks from all over the world coming together to get better at what they do. Join in the fun and learning — without needing to leave your desk. The workshops are filled with practical examples, video recordings and friendly Q&A sessions.

Smashing Online Events
Live and interactive 2.5h-sessions with folks all over the world!

In fact, we’ve just announced our new front-end & UX workshops on form design, SVG animation, design systems, HTML email and front-end adventures in 2021. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well.


5. Improving Google Fonts Performance

Self-hosting fonts is widely accepted to be the fastest option when using web fonts. However, Google Fonts can be speedy, too: their ability to serve the tiniest possible font files to specific user agents and platforms and their relatively new support for font-display via the URL parameter &display=swap are already a good base. And, as Harry Roberts shows, there are quite some things that you can do to improve their performance even further and mitigate a lot of the issues that Google Fonts are commonly known for.

The Fastest Google Fonts

For his article “The Fastest Google Fonts,” Harry went down the performance testing rabbit hole to find the best combination for fast Google Fonts: asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. All of these techniques combined might sound a bit overwhelming at first, but Harry concludes his article with a slim and maintainable snippet that helps you get the most out of Google Fonts. (cm)


6. Fight FOUT And Make Lighthouse Happy

Maybe you’ve experienced this scenario before: You choose a web font, implement the HTML or CSS code snippet into your project, and check if they display properly. So far so good, but once you check the site in Lighthouse, you get the message that you need to eliminate render-blocking resources as they add a one-second delay to render. What do you do?

Diagram explaining render blocking.

Adrian Bece dedicated an article to this scenario in which he shares valuable tips for eliminating font stylesheets as a render-blocking resource. In it, he walks you through an optimal setup that not only makes Lighthouse happy but also overcomes the dreaded flash of unstyled text. Thanks to a combination of vanilla HTML, CSS, and JavaScript, the approach can be applied to any tech stack. A Gatsby implementation and a plugin that Adrian developed as a drop-in solution for it are also covered. (cm)


7. New On Smashing Job Board


8. Our Current Most Popular Articles


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook


unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #279: Web Performance

Tuesday, December 15, 2020

On tweaking JavaScript bundles, removing flickering, building the DOM faster and useful performance tools. Issue #279 • Tue, Dec. 15, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We

Smashing Newsletter #277: DevTools For VSCode, Screen Recorder, Date Picker

Friday, December 4, 2020

With JAMStack, Devtools for VSCode, date picker and screen recorder and annotation tool. Issue #277 • Tue, Dec. 1, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Look at how smashing you

Smashing Newsletter #276: CSS Edition

Tuesday, November 24, 2020

Preventing layout shifts with CSS Grid, clamp(), custom list markers and fixed haders and jump links with scroll-margin. Issue #276 • Tue, Nov. 24, 2020 • View in the browser 💨 Smashing Newsletter Dear

Making Sense Of TypeScript, in 50 Lessons.

Tuesday, November 17, 2020

Our new book on TypeScript, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. TypeScript in 50 Lessons: TypeScript, from start to finish.

Smashing Newsletter #275: React Rendering, JavaScript Debugging, CSS and SVG

Tuesday, November 17, 2020

With server-side rendering, JavaScript debugging, free CSS/SVG background patterns and how to avoid user frustrations. Issue #275 • Tue, Nov. 17, 2020 • View in the browser 💨 Smashing Newsletter Dear

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget