Display-font: swap

Contribute UX

AI-generated summary

The discussion revolves around improving user experience by optimizing font loading in Discourse. pavelloz suggests adding &display=swap to the Google font CSS loader to prevent font loading delays, and provides an example of how to implement this.

However, awesomerobot explains that this is not necessary in Discourse, as fonts are included in the application on initial load, eliminating the need to make a call to Google. They note that font-display: swap; is still good advice for custom fonts loaded from third-party CDNs in themes.

pavelloz shares a screenshot of try.discourse.org loading fonts from Google, but awesomerobot clarifies that this is a specific case due to customization, and suggests using safe-mode when investigating performance issues.

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