Display-font: swap

ux
1

Hello,

I noticed that google font is used (and in settings i know that more than one can be selected)

To improve user experience before the font is loaded, its good to add &display=swap to the google css loader.

So: css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Becomes: css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Read more on:

PS. Some dots are there because i cant paste more than two links in a post as a newbie :wink:

2 Likes
2

font-display: swap; impacts the block and swap time when waiting for a font to load, but we’re including the font from the backend (we have a separate discourse-fonts gem — doing it this way eliminates making a call to Google and being tracked).

So because fonts are included as part of the Discourse application on initial load, I don’t think we’d see any benefit because fonts aren’t holding up rendering like they would be if we were calling out to Google (or another CDN) in our CSS.

Using font-display: swap; is still probably good advice for anyone adding custom fonts from a third-party CDN in a theme though.

6 Likes
3

Hmmm… Is try.discourse.org a representative instance to be looking at when it comes performance issues?

I saw fonts loaded from google in there, and assumed its a global thing.

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

1 Like
4

Ah that makes sense, we imported the font on Try because we have a header that matches discourse.org (which uses open sans)… we can use swap there or even include the font in the theme directly.

You can use Try when looking at performance issues, but maybe use safe-mode just to be sure it’s not related to slight customization we’ve added.

4 Likes