Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

Question

[organica]

Господа, от безысходности пишу вопрос здесь т.к. своими силами уже не знаю куда копать в решении проблемы.
PageSpeed гугла упорно ругается на "Настройте показ всего текста во время загрузки веб-шрифтов".

URL Потенциальная экономия данных (КБ)
…roboto/Roboto-Light.woff2 80 ms
…roboto/Roboto-Bold.woff2 230 ms
…roboto/Roboto-Regular.woff2 230 ms

В Style.css

@font-face {
    font-display: swap;
    font-family: 'Roboto-Bold';
    src: local('Roboto'),
    url('../font/roboto/Roboto-Bold.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Roboto-Light';
    src: local('Roboto'),
    url('../font/roboto/Roboto-Light.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    src: local('Roboto'),
    url('../font/roboto/Roboto-Regular.woff2') format('woff2')
}

html {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

Вроде и @font-face сделан, и fallback шрифт есть, а ошибка никуда не уходит. В связи с этим десктопная версия сайта выдает 92 балла, а мобильная 40-45

Comments

[Rustam Bainazarov]

А где просто WOFF? Не все браузеры поддерживают WOFF2. А WOFF — считайте всё современные и не очень. Добавьте и тоже.

Я не помню, почему точно, но помню, что font-display: swap; стоит ставить последним свойством внутри правила.

[organica]

Не спасло

@font-face {
    font-family: 'Roboto-Bold';
    font-display: swap;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Bold.woff2') format('woff2'),
    url('../font/roboto/Roboto-Bold.woff') format('woff')
}
@font-face {
    font-family: 'Roboto-Light';
    font-display: swap;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Light.woff2') format('woff2'),
    url('../font/roboto/Roboto-Light.woff') format('woff')
}
@font-face {
    font-family: 'Roboto';
    font-display: swap;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Regular.woff2') format('woff2'),
    url('../font/roboto/Roboto-Regular.woff') format('woff')
}

html {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

[Rustam Bainazarov]

organica, погодите, зачем каждому начертанию вы даёте своё название?

[organica]

Рустам Байназаров, В каком-то из туториалов гугла встретил такой вариант. Сделал всем шрифтам font-family: 'Roboto', ничего не поменялось

[Rustam Bainazarov]

Вот это используйте:

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Bold.woff2') format('woff2'),
    url('../font/roboto/Roboto-Bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Light.woff2') format('woff2'),
    url('../font/roboto/Roboto-Light.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Regular.woff2') format('woff2'),
    url('../font/roboto/Roboto-Regular.woff') format('woff');
    font-display: swap;
}

html {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

[organica]

Рустам Байназаров,

[Rustam Bainazarov]

organica, я не знаю, что у вас за такие безумные используются файл шрифта.

Пропишите вот это в head (не через import, чтобы не было проблем со старыми браузерами):

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic" rel="stylesheet">

Свои эти стили закомментируйте.

[organica]

Рустам Байназаров, Сейчас в style.css вот так

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic');

html {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

Папку со шрифтами вообще удалил.
Также нашел, что у меня mdb.css устанавливал @font-family c Roboto и ссылался на локальный путь. Все эти строчки закомментил.
По итогу сайт все равно пытается загрузить эти три шрифта локально. Что я делаю не так?!

[Rustam Bainazarov]

organica, значит, где-то ещё у вас грузятся шрифты с вашего сайта.

[Yan Markov]

Пробуйте грузить асинхронно через fontFaceObserver

[No_Bugs]

мне помог перенос font-display наверх