Make WordPress Core

Opened 5 years ago

Last modified 3 years ago

#41071 new defect (bug)

Twenty Seventeen: Font Creates a Single Point of Failure

Reported by: jhabdas Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: ui, performance Cc:


In attempting to develop locally using the Twenty Seventeen theme I have noticed the round trip to Google to pull down a Web Font creates a single point of failure. Steve Souders did quite a bit of work in this area several years ago:

For Web Fonts the problem is quite bad because they cannot be deferred like scripts without creating a FOUT/FOUC. So I'm curious, why not simply host the Web Fonts locally? Why create a SPOF by relying on an external stylesheet to load the Web Font?

Change History (8)

#1 in reply to: ↑ description @jhabdas
5 years ago

I seem to be unable to edit my ticket. So here's a link directly to Steve's work, which is linked from the provided resource: Cheers.

#2 @SergeyBiryukov
5 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty Seventeen Theme Font Creates a Single Point of Failure to Twenty Seventeen: Font Creates a Single Point of Failure

#3 @jhabdas
5 years ago

I noticed the VIP Scanner plugin, a UI wrapped around the scanner library, errors theme review checks if it detects font files within a theme, which seems not right as it encourages individuals to use Web Fonts causing SPOF.

Last edited 5 years ago by jhabdas (previous) (diff)

#4 @jhabdas
5 years ago

This image captures the 17 seconds I spent waiting for WordPress page content to appear a result of a Web Font SPOF:

This is of course not the Twenty Seventeen theme. But the effect is the same.

And though a DNS prefetch may help reduce the DNS lookup time it does not remove the SPOF introduced. Upon a cursory check it appears Twenty Seventeen does not currently perform DNS prefetching.

Last edited 5 years ago by jhabdas (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

5 years ago

#6 @afercia
5 years ago

  • Focuses accessibility removed

Removing the accessibility focus as not strictly related to universal access for everyone.

#7 @jhabdas
4 years ago

  • Focuses accessibility added

I'm in Indonesia (population 25M in capital only) and Google Fonts seem to be working but the WOFF and WOFF2 files become unexpectedly canceled in Yandex Browser. This causes all of the text on some of my pages to load using system fonts when fonts could be removed from Google to reduce the SPOF and prevent these kinds of edge cases worldwide.

Restored accessibility tag given "universal access" is a concern here, as SPOF causes an entire page to become unusable and certain portions of the world are more greatly affected than others as I've exemplified above.

Last edited 4 years ago by jhabdas (previous) (diff)

#8 @afercia
3 years ago

  • Focuses accessibility removed

This causes all of the text on some of my pages to load using system fonts

Maybe I'm missing something but the fallback to system fonts actually allows to read the content, no? If so, the content is still accessible in terms of web content accessibility, though maybe not so pretty :)

It would be great to have some feedback from the Bundled Theme component maintainers /Cc @davidakennedy @laurelfulford

Note: See TracTickets for help on using tickets.