corpus.blog
41554 blogs · 4,450,554 posts Claim your blog
Record · corpus.blog/posts/01a087e1-337a-72fb-992a-441a39a740f6

How to avoid layout shifts caused by web fonts

simonhearne.com · published 19 January 2021

A record is what was published and who pointed at it. The text of the post is not held here: read it at the source, or at its Wayback capture.

Read the post at simonhearne.com Wayback capture
6blogs citing
First cited
1 Feb 2021
Most recent
25 Jun 2025
Rank this month
not ranked
Links from this post
55
Words captured
4,672

Cited by

Blog
In the post
Date
lknuth.dev
Webfont and Performance Read at the source ↗
25 Jun 2025
Tomer Aberbach
Avoid Layout Shifts Caused by Web Fonts With PostCSS Fontpie Read at the source ↗
24 May 2023
ohgm.co.uk
Zero Cumulative Layout Shift, Please Improve Cumulative Layout Shift Read at the source ↗
29 Jun 2022
a11yweekly.com
Your Wordle Results are Annoying, but Not for the Reasons You Think Read at the source ↗
14 Feb 2022
Kevin Woblick's Blog
Collection #24 Read at the source ↗
31 Jan 2022
Nick Simson, Internet Nobody.
Accessibility and Performance Read at the source ↗
7 Feb 2021
a11yweekly.com
Tips for Focus Styles Read at the source ↗
1 Feb 2021

Links from this post

Link
Host
How to Improve Core Web Vitals Read at the source ↗
simonhearne.com
https://developers.google.com/search/blog/2020/11/timing-for-page-experience
developers.google.com
https://webpagetest.org/
webpagetest.org
https://simonhearne.com/images/layout-shifts-webfonts/wapo-headline.png
simonhearne.com
https://webpagetest.org/video/compare.php?tests=210120_Di3C_126898f84daca6ada62ee7736a29bddb-r%3A1-c%3A0&highlightCLS=1&thumbSize=600&ival=100&end=visual&text=000&bg=fff
webpagetest.org
https://simonhearne.com/images/layout-shifts-webfonts/wapo-shift.jpg
simonhearne.com
https://simonhearne.com/images/layout-shifts-webfonts/font-display.png
simonhearne.com
https://speakerdeck.com/notwaldorf/fontastic-web-performance?slide=74
speakerdeck.com
https://twitter.com/notwaldorf
twitter.com
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
developer.mozilla.org
https://juiceboxinteractive.com/blog/how-pepsi-won-the-battle-but-lost-the-challenge/
juiceboxinteractive.com
https://simonhearne.com/images/layout-shifts-webfonts/faux-bold.png
simonhearne.com
https://graphicdesign.stackexchange.com/questions/75965/distinguishing-real-and-faux-bold-and-italics
graphicdesign.stackexchange.com
https://caniuse.com/variable-fonts
caniuse.com
https://fonts.google.com/?vfonly=true
fonts.google.com
https://fonts.google.com/specimen/Exo?vfonly=true
fonts.google.com
https://www.axis-praxis.org/specimens/__DEFAULT__
axis-praxis.org
https://fontawesome.com/
fontawesome.com
https://getbootstrap.com/docs/3.3/components/
getbootstrap.com
https://www.wouterbulten.nl/blog/tech/blog-optimization-replacing-font-awesome-with-svg/
wouterbulten.nl
https://twitter.com/ninjanails
twitter.com
https://www.youtube.com/watch?v=9xXBYcWgCHA
youtube.com
New helper added: Font style matcher – Matches the x-heights and widths of two fonts (webfont and fallback font). Read at the source ↗
meowni.ca
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
smashingmagazine.com
https://simonhearne.com/images/layout-shifts-webfonts/roboto-glyphs.png
simonhearne.com
https://fonts.google.com/specimen/Roboto?selection.family=Roboto&sidebar.open=true
fonts.google.com
https://simonhearne.com/images/layout-shifts-webfonts/subset-roboto.png
simonhearne.com
https://developers.google.com/fonts/docs/getting_started
developers.google.com
https://github.com/filamentgroup/glyphhanger
github.com
https://www.filamentgroup.com/lab/glyphhanger/
filamentgroup.com
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
developer.mozilla.org
https://fonts.googleapis.com/css2?family=Open+Sans&display=swap
fonts.googleapis.com
https://simonhearne.com/images/layout-shifts-webfonts/woff2-support.png
simonhearne.com
https://caniuse.com/woff2
caniuse.com
https://almanac.httparchive.org/en/2020/fonts
almanac.httparchive.org
https://almanac.httparchive.org/en/2020/third-parties
almanac.httparchive.org
http://fonts.gstatic.com/
fonts.gstatic.com
http://fonts.googleapis.com/
fonts.googleapis.com
https://caniuse.com/mdn-http_headers_cache-control_immutable
caniuse.com
https://simonhearne.com/images/layout-shifts-webfonts/font-crp.png
simonhearne.com
https://web.dev/optimize-webfont-loading/
web.dev
https://simonhearne.com/images/layout-shifts-webfonts/preload-slow-script.png
simonhearne.com
https://docs.google.com/document/d/1PW-5ML5hOZw7GczOargelPo6_8Zkuk2DXtgfOtJ59Eo/edit
docs.google.com
https://github.com/google/fonts/tree/master/ofl/
github.com
https://fontdrop.info/
fontdrop.info
https://simonhearne.com/images/fontdrop.jpg
simonhearne.com
https://codepen.io/simonjhearne/pen/rNMGJyr
codepen.io
https://codepen.io/simonjhearne
codepen.io
https://codepen.io/
codepen.io
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
developer.mozilla.org
https://chrome.google.com/webstore/detail/dyslexia-friendly/miepjgfkkommhllbbjaedffcpkncboeo?hl=en
chrome.google.com
https://www.w3.org/Fonts/WG/
w3.org
https://fonts.gstatic.com/experimental/incxfer_demo
fonts.gstatic.com
https://twitter.com/jpamental
twitter.com
https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance
rwt.io