How to fix Safari not loading a font until browser refresh

In this quick tutorial I’ll show how I fixed a font issue on one of my projects.

There’re a lot of tutorials on how to add custom web fonts to your project. It’s not going to be yet another one.

The problem

If you’re using custom web fonts there’s a chance that they won’t load properly until browser refresh in Safari.

Here is a demo code.

@font-face {
  font-family: 'Custom font';
  src: url('../fonts/CustomFont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/CustomFont.woff2') format('woff2'),
  url('../fonts/CustomFont.woff') format('woff'),
  url('../fonts/CustomFont.ttf') format('truetype'),
  url('../fonts/CustomFont.svg#CustomFont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; // this is important
}

The solution

Note the font-display declaration. It tells the browser the state of the custom font: when it was downloaded, is it ready and when to display it.

Safari will not show the custom font if font-display is set to optional (font-display: optional;). The browser will give a very short period to download the custom font and no option to swap it.

Make sure you change it to swap. It will swap the default font with the custom one once it’s downloaded.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/font-face-font-display