Почему шрифт отображается с задержкой?

Question

[Антон]

В head подключаю файл со стилями. В нем в самом начале прописано:

import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

Дело именно в этой строке, ибо без нее все нормально.

Теперь о проблеме. При загрузке страницы все тексты, шрифт которых Open Sans отображаются не сразу. Выглядит это примерно так:


Как только страница загружается до конца, тексты появляются. Загрузка эта может достигать почти 2 секунды, а на странице то даже картинок нет. JavaScript тут не причем - отключал, проверял.

Не могу понять в чем проблема. Рассчитываю на вашу помощь.

Answer 1

[Александр]

Шрифт не успевает загрузится.

Comments

[Антон]

А можно как-нибудь ускорить этот процесс?

[Александр]

Скачать по ссылке fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700 стиль, скачать шрифты из стилей и заменить на локальный адрес.

Answer 2

[Сергей Новиков]

Используйте тэг
<link rel="stylesheet" type="text/css" href="...">

Comments

[Антон]

Тоже самое. Подключал шрифт самым первым.

Answer 3

[link_irk]

Загрузка шрифта с удалённого сервера - отдельный http запрос, который этот сервер обрабатывает. А браузер в это время ждёт от него ответа. Если вы посмотрите в отладчике, то увидите этот запрос (а скорее всего их там будет даже несколько с различными начертаниями и форматами шрифта). Я конечно не уверен, но смею предположить, что загрузка шрифтов с вашего сервера (а грузятся шрифты именно в браузере у клиента) не ускорит этот процесс, если конечно маршрут до вашего сервера не окажется быстрее. Выход - заставить всех пользователей установить этот шрифт локально у себя на компьютерах :) Или же искать сервисы со шрифтами, время загрузки которых будет минимально (причём не только у вас, но и у всех клиентов). Но, сомневаюсь, что вы найдёте что-то лучше, чем Google. Ещё попробуйте указать альтернативный шрифт в CSS (font-family: 'Open Sans', Arial). Вероятно, в момент подгрузки шрифта текст будет выводиться корректно, но другим шрифтом