---
title: "The performance benefits of variable fonts"
publication: "Frontend Focus"
issue: 431
published_at: "2020-03-11"
canonical_url: "https://frontendfoc.us/issues/431"
---

This week's HTML, CSS and browser news       

#431 — March 11, 2020 

[Read on the Web](https://frontendfoc.us/issues/431)   

Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1583843975/h2udxpmsbyx7v6op2aaw.png)](https://medium.com/@mandy.michael/the-performance-benefits-of-variable-fonts-79af8c4ff56c)   

[The Performance Benefits of Variable Fonts](https://t.co/Od4dREtYtx?amp=1) — This is a good look at the performance gains you can expect when using variable fonts, with a focus on font requests, file sizes and time to first render. If you’re just starting to explore using variable fonts, [this is a great related resource](https://variablefonts.io/about-variable-fonts/). 

Mandy Michael   

[Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) — Thanks to some recent changes in browsers, it’s now well worth setting `width` and `height` attributes on your images to prevent layout shifts and improve the experience of your site visitors. 

Barry Pollard   [![\](https://copm.s3.amazonaws.com/51652c12.jpg)](https://pages.awscloud.com/awsmp-Ops-SS-NewRelic-ScaleK8.html?&trk=el_a131L0000084LRSQA2&trkCampaign=awsmp_Ops_SS_NewRelic_ScaleK8&sc_outcome=Marketplace&sc_country=mult) 

[AWS Webinar: How to Scale Kubernetes in AWS](https://pages.awscloud.com/awsmp-Ops-SS-NewRelic-ScaleK8.html?&trk=el_a131L0000084LRSQA2&trkCampaign=awsmp_Ops_SS_NewRelic_ScaleK8&sc_outcome=Marketplace&sc_country=mult) — Operating a Kubernetes environment at scale requires monitoring for performance and health. Join this webinar to discover how to proactively approach monitoring of your Kubernetes environments—at any scale and any level of complexity. 

Amazon Web Services (AWS) sponsor   

[Many Podcast Episodes Won’t Play in Web Browsers Later This Year](https://blog.pacific-content.com/many-podcast-episodes-wont-play-in-web-browsers-later-this-year-19bfe7d6f76c) — An estimated 1 million+ podcast episodes aren’t available over secure connections, and it’s about to become a problem. 

Dan Misener   

[The History of the URL](https://blog.cloudflare.com/the-history-of-the-url/) — This is a great deep-dive into the anatomy of the humble URL and how it came into being. 

Zack Bloom (Cloudflare)   

[Firefox 74.0 Released](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/74) — Version 74 of Firefox arrived today. We’ve linked to the _developer_ release notes as the headline features are minimal. Developer level changes include Feature Policy support enabled by default, TLS 1.0 and 1.1 support removed, `text-underline-position` CSS property now enabled, and JavaScript gains the [optional chaining operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) 

Mozilla   

[More Accessible Defaults, Please](https://hiddedevries.nl/en/blog/2020-03-01-more-accessible-defaults-please) — Due to the complex nature of web apps, it’s no longer correct to say the web is ‘accessible by default’. As Hidde points out, we need browser accessibility bugs to be prioritized. 

Hidde de Vries  

💻 **Jobs**  

[UX/Frontend Engineer @ Siteline](https://jobs.lever.co/siteline/e97a73bc-7235-4613-a9ed-a17c2cffbaf0) — Join the founding engineering team at Siteline and help us revolutionize the payments process for construction. 

Siteline   

[React JS Developer (Remote)](https://www.komoot.com/jobs/reactjs-developer) — 9+ million people plan outdoor adventures with our apps every day. If you are smart and ambitious, join us to inspire people to explore more of the great outdoors. 

Komoot   

[Find a Dev Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers. 

Vettery  

ℹ️ _If you're interested in running a job listing in Frontend Focus, there's [more info here.](https://booking.cooperpress.com/jobs)_ 

📙 **News, Tutorials & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1583771634/x4t9dbjbjvei8lightke.png)](https://css-tricks.com/how-we-created-a-static-site-that-generates-tartan-patterns-in-svg/)  

[How We Created a Static Site That Generates Tartan Patterns in SVG](https://css-tricks.com/how-we-created-a-static-site-that-generates-tartan-patterns-in-svg/) — There are thousands of Tartan patterns (_the cloth that’s typically associated with Scotland_) - here’s a look at how they were all digitally weaved with code (React). 

Paulina Hetman   

[Scroll Snapping After Layout Changes](https://web.dev/snap-after-layout/) — Starting in Chrome 81, scrollers remain snapped when the page layout changes, no longer requiring event listeners to force snapping, which fixes a shortcoming of this feature. 

Yi Gu, Kaan Alsan, Adam Argyle   

[Can We Make Open Source More Sustainable?](https://www.telerik.com/blogs/can-we-make-open-source-more-sustainable?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-can-we-make-open-source-more-sustainable&utm_content=sponsored-link) — TJ VanToll on the problematic economic model of OSS and a few options to make it more sustainable. Share your thoughts. 

Progress KendoReact sponsor   

[Adding Scroll Animations to Your Page](https://cssanimation.rocks/scroll-animations/) — This detailed tutorial was first published last year but has recently been updated to include `IntersectionObserver` methods. 

CSS Animation   

[Intersection Observer API Makes Lazy Loading a Snap](https://www.telerik.com/blogs/intersection-observer-api-makes-lazy-loading-a-snap) — Related to the above item, here's a decent overview of `IntersectionObserver`, using the example of lazy loading elements. 

Leonardo Maldonado   

[How to Build a File Upload Form with Express and DropzoneJS](https://www.sitepoint.com/file-upload-form-express-dropzone-js/) — Lukas White takes an in-depth look at DropzoneJS — a configurable JavaScript library that makes it easier to deal with file uploads. 

Lukas White   

▶[Building an Animated Counter with JavaScript](https://www.youtube.com/watch?v=a6XIMIKmj9k) — JavaScript has just gotten so _serious_ nowadays, so I like to frequently link to tutorials like this that cover building neat Web page effects.. like we used JavaScript for back in the 90s 😄 _18 minutes._ 

Traversy Media   

[Why Svelte Is Our Choice for A Large Web Project in 2020](https://github.com/feltcoop/why-svelte) 

Ryan Atkinson   

[31 Days of #MarchMediaMadness. New Cloudinary Challenges, Win Daily](https://cloudinary.rocks/MarchMediaMadness) 

Cloudinary sponsor   

[Announcing Mobile First Indexing for The Whole Web](https://webmasters.googleblog.com/2020/03/announcing-mobile-first-indexing-for.html) 

Google   

[An Explainer for The Proposed 'IsLoggedIn' API](https://github.com/WebKit/explainers/tree/master/IsLoggedIn) 

Theresa O'Connor   

[Modal vs Page: A Decision Making Framework](https://uxplanet.org/modal-vs-page-a-decision-making-framework-34453e911129) 

Ryan Neufeld  

🔧 **Code, Tools and Resources**  

[OpenSilver: A Modern, Plugin-Free Reimplementation of Silverlight](https://www.opensilver.net/) — This is a replacement for Microsoft’s deprecated Silverlight. It’s open-source and runs in current browsers via WebAssembly. [Here’s the announcement post](https://www.opensilver.net/announcements/introducing-opensilver.aspx). 

Userware   

[Bootstrap Treeview: A Simple Plugin to Build A Treeview with Bootstrap 4](https://github.com/chniter/bstreeview) — Here’s a [live demo](https://chniter.github.io/bstreeview/). 

Sami Chniter   

[ls-lint: A Fast File and Directory Name Linter](https://github.com/loeffel-io/ls-lint) — Written in Go but clearly aimed at JS/front-end dev use cases. `ls-lint` provides a way to enforce rules for file naming and directory structures. 

Lucas Löffel   

[geo-info: A Reverse Geocoding API](https://geo-info.co/) — Used to to turn coordinates into human readable locations. 

geo-info   

[A List of Browser-Based SVG Editors](https://css-tricks.com/browser-based-svg-editors/) 

Chris Coyier   

🗓 **Upcoming Events**  

[PerfMatters, March 31 - April 1 — Redwood City, USA](https://perfmattersconf.com) — A web performance conference with a focus on frontend web performance with talks by internationally renowned performance developers.   

[FrontCon, April 1-3 — Riga, Latvia](https://2020.frontcon.com/) — A two-day conference that focuses on front-end concepts and technologies. _This event is still going ahead at time of writing but [updated safety measures have been shared](https://2020.frontcon.com/recommended-safety-measures-in-the-context-of-the-outbreak-of-covid-19/)_.   

[ImageCon, April 22-23 — San Francisco, USA](https://www.imagecon.com/) — _This event has been postponed due to the Coronavirus outbreak_.   

[Frontend United, April 30 - May 2 — Minsk, Belarus](https://www.frontendunited.org) — Three days of sessions, workshops and socials for frontend devs and designers.   

[You Gotta Love Frontend Conference, May 14-15 — Vilnius, Lithuania](https://lithuania.yglfconf.com/) — Described as having "big names with irresistible talks and a whole lot of fun".           

A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). 

[Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom