Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как настроить показ всего текста во время загрузки веб-шрифтов?

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


     08.12.2018    Гугл, шрифты, css    Все вопросы » Стили (CSS)    224

вопрос
Подскажите пожалуйста, что хочет гугл, и как исправть?

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


Думаю здесь нужно подправить:
@font-face {
    font-family: 'GothaPro';
    src: url('GothaProBla.eot');
    src: local('☺'), url('GothaProBla.woff') format('woff'), url('GothaProBla.ttf') format('truetype'), url('GothaProBla.svg') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'GothaPro';
    src: url('GothaProBlaIta.eot');
    src: local('☺'), url('GothaProBlaIta.woff') format('woff'), url('GothaProBlaIta.ttf') format('truetype'), url('GothaProBlaIta.svg') format('svg');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'GothaPro';
    src: url('GothaProBol.eot');
    src: local('☺'), url('GothaProBol.woff') format('woff'), url('GothaProBol.ttf') format('truetype'), url('GothaProBol.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GothaPro';
    src: url('GothaProBolIta.eot');
    src: local('☺'), url('GothaProBolIta.woff') format('woff'), url('GothaProBolIta.ttf') format('truetype'), url('GothaProBolIta.svg') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'GothaPro';
    src: url('GothaProIta.eot');
    src: local('☺'), url('GothaProIta.woff') format('woff'), url('GothaProIta.ttf') format('truetype'), url('GothaProIta.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'GothaPro';
    src: url('GothaProReg.eot');
    src: local('☺'), url('GothaProReg.woff') format('woff'), url('GothaProReg.ttf') format('truetype'), url('GothaProReg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ответа пока нет


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

akella
Юзер

akella - 8 декабря 2018 22:40 -

попробуйте добавить
font-display:swap;
в каждом @font-face

ofara734
Юзер

ofara734 - 9 декабря 2018 09:57 -

akella, тот же результат...

akella
Юзер

akella - 9 декабря 2018 12:25 -

может это поможет:
в <head> для каждого шрифта, перед подключаемыми CSS
<link rel="preload" href="ссылка на шрифт" as="font" crossorigin>

futbik
Юзер

futbik - 10 декабря 2018 22:36 -

А если шрифты от https://fonts.google.com/? к примеру у меня та же проблема.

akella
Юзер

akella - 11 декабря 2018 02:50 -


futbik
Юзер

futbik - 11 декабря 2018 15:14 -

akella,
Везде написал как в инструкции font:14px 'Roboto Condensed', sans-serif;

На главной:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Open+Sans:400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext">

Так же я добавил:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

В интернете прочитал что это поможет.

futbik
Юзер

futbik - 11 декабря 2018 18:06 -

<script>
$("head").append('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Open+Sans:400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext">');</script>

Можно так, но сайт дергается :)

hobokumo
Юзер

hobokumo - 13 декабря 2018 18:14 -

Казалось бы элементарный вещь, но бывает и такое :)

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

 22.07.2014 249893  Стили (CSS)
наверх