@font-face вызывает медленное время загрузки

В последнее время я начал замечать, что сайт загружается очень медленно в какой-то момент.

Я исследовал это с помощью firebug, и когда страница занимает очень много времени, это показывает:

Firebug Net Inspection Кажется совершенно случайным, но запросы на webfont.woff просто ждут и ждут вечно. Если я попытаюсь достичь этого ресурса вручную, он отлично работает и отвечает в течение 100 мс. Страница, о которой я говорю, http://wtf.maikelzweerink.nl, а пользовательские шрифты поступают из основного домена maikelzweerink.nl.

Лица-шрифты объявляются по умолчанию. css, также из основного домена:

@font-face {
    font-family: 'Proximanova Regular';
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}

Даже с правильными заголовками HTTP

В хром то же самое дело (нажмите для увеличения): Chrome time test

Ответы

Ответ 1

Я использовал base64 для включения шрифта внутри CSS, чтобы уменьшить количество запросов. Base64 имеет недостаток в стоимости более начальной полосы, но эй, это работает! Это исправлено.

Конечно, я не очень доволен CSS файлом размером 180 КБ:/

Edit: Оказалось, что это проблема интернет-провайдера. Когда я mannualy загрузил шрифт, он извлек его из кеша (черт возьми!). Каким-то образом эти шрифты, которые не доступны непосредственно в службе ISP, а также запросы/чтения с жесткого диска, занимают некоторое время.

Ответ 2

Типы MIME устанавливаются в текстовые/обычные шрифты, а не то, что они должны быть.

В вашем файле .htaccess(предполагая Apache) добавьте:

AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Это позволит исправить ситуацию и убедиться, что шрифты работают во всех браузерах.