Как минимизировать задержку загрузки шрифта?

Question

Я попробовал Google Lighthouse, и он указал мне на статью о том, как загрузить шрифты без задержки:

https://developers.google.com/web/updates/2016/02/font-display

Я использую Open Sans, которые я загружал так:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

В статье был пример, который я попытался использовать вместо:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url(https://fonts.googleapis.com/css?family=Open+Sans) format('woff2');
}

Это не работает. Что я делаю не так?

---

РЕДАКТИРОВАТЬ: Найдено. Я должен сохранить font-family: "Open Sans", который, как я думал, больше не использовался. Извините за шум.

Answer 1

вы забыли слова "", то, что вы хотите здесь:

@font-face {
  font-family: 'Open Sans';
  font-display: block;
  src: local('Open Sans'), url("https://fonts.googleapis.com/css?family=Open+Sans") format('woff2');
}