# Display-font: swap

**URL:** <https://meta.discourse.org/t/display-font-swap/170390>\
**Category:** UX\
**Created:** [November 17, 2020, 7:19pm UTC](https://meta.discourse.org/t/display-font-swap/170390 "2020-11-17T19:19:10Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![pavelloz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pavelloz/32/200311_2.png) [@pavelloz](https://meta.discourse.org/u/pavelloz)\
**Post date:** [November 17, 2020, 7:19pm UTC](https://meta.discourse.org/t/display-font-swap/170390/1 "2020-11-17T19:19:10Z")

</div>

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

```plaintext
@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

```plaintext
@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:

> **[Google Fonts is Adding font-display 🎉—zachleat.com](https://www.zachleat.com/web/google-fonts-display/)**
>
> A post by Zach Leatherman (zachleat)

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

---

_[View the full topic](https://meta.discourse.org/t/display-font-swap/170390)._