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

Question

organica @organica

HTML
CSS

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

Господа, от безысходности пишу вопрос здесь т.к. своими силами уже не знаю куда копать в решении проблемы.
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

Вопрос задан более трёх лет назад
643 просмотра

11 комментариев

Подписаться 2 Простой 11 комментариев

Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад

organica @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 @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
organica @organica Автор вопроса

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

Написано более трёх лет назад

Rustam Bainazarov @SmthTo Куратор тега CSS

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

@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 @organica Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS
organica, я не знаю, что у вас за такие безумные используются файл шрифта.

Пропишите вот это в head (не через import, чтобы не было проблем со старыми браузерами):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic" rel="stylesheet">

Свои эти стили закомментируйте.
Написано более трёх лет назад
organica @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 @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Yan Markov @mroforolhc

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

Написано более трёх лет назад
No_Bugs @No_Bugs

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как убрать отступ?
- 1 подписчик
- час назад
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 4 часа назад
- 35 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 10 часов назад
- 80 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 10 часов назад
- 95 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- вчера
- 84 просмотра
2

ответа
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Сделать дизайн главной страницы сайта

19 апр. 2024, в 19:17

1500 руб./за проект

DevOps задачи, работа с Yandex Cloud и Yandex Database

19 апр. 2024, в 18:38

1500 руб./в час

Верстка сайта -4-5 страниц

19 апр. 2024, в 18:36

1500 руб./за проект

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

Я не помню, почему точно, но помню, что font-display: swap; стоит ставить последним свойством внутри правила.
Не спасло
@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; }
organica, погодите, зачем каждому начертанию вы даёте своё название?
Рустам Байназаров, В каком-то из туториалов гугла встретил такой вариант. Сделал всем шрифтам font-family: 'Roboto', ничего не поменялось
Вот это используйте:

@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, я не знаю, что у вас за такие безумные используются файл шрифта.

Пропишите вот это в head (не через import, чтобы не было проблем со старыми браузерами):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic" rel="stylesheet">

Свои эти стили закомментируйте.
Рустам Байназаров, Сейчас в 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 и ссылался на локальный путь. Все эти строчки закомментил.
По итогу сайт все равно пытается загрузить эти три шрифта локально. Что я делаю не так?!
organica, значит, где-то ещё у вас грузятся шрифты с вашего сайта.
Пробуйте грузить асинхронно через fontFaceObserver

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт