Проблемы с woff-шрифтами на примере PT Sans Narrow?

Я верстал и продолжаю сопровождать один довольно высоконагруженный сайт. Там для заголовков используется известный шрифт PT Sans Narrow.


Сначала я просто скачал шрифтовые файлы с FontSquirrel и положил их непосредственно на сервер. Но вскоре выяснилось, что у сквирловской версии есть серьезные глюки.

Во-первых, почему-то не работает буква «ё».

Во-вторых, некоторые буквы в определенных размерах кегля как бы выпрыгивают из строки, будучи чуть выше соседей. Во всяком случае, в Windows. Например, «е» в размерах 16px и 22px:
pt-sans-bug.png


Поэтому я подался на Google Web Fonts. Дополнительно привлекало cнижение нагрузки на свой сервер.

Но заказчик стал жаловаться на медленную загрузку шрифта, из-за которой пользователи Firefox по полминуты наблюдали пустой экран. После ряда попыток сооружения различных костылей, вышел на специальный JS-загрузчик. С ним проблема существенно сгладилась, но увы, не исчезла совсем. В настоящее время на сайте работает именно это решение.


Не так давно попалась идея воткнуть шрифт, закодированный в base64, непосредственно в CSS. Казалось бы, просто и гениально.

Но обнаружилось, что woff-файл с Google Fonts весит какие-то неадекватные 247 килобайт. Убедиться в этом можно, вытащив ссылку из css-файла. Если не ошибаюсь, base64 просто не может кроссбраузерно вместить такой объем. Тот же самый шрифт, скачанный с FontSquirrel, тянет на 23 килобайта, то есть в 10 с лишним раз меньше! Но он, как сказано выше, глючный.


Это я ещё молчу про скачущую у разных woff-конвертеров базовую линию (мешает точному вертикальному позиционированию текста, например, на кнопках)… Всё это очень раздражает.

Извечные вопросы: кто виноват и что делать?

Где найти/как сделать маленький и безглючный шрифт?
  • Вопрос задан
  • 11773 просмотра
Пригласить эксперта
Ответы на вопрос 3
@Softlink
Попробуйте взять отсюда шрифт. И ё есть и хинтинг вроде не скачет на размерах.
Можете проверить прямо там же: без засечек > PTSansNarrowRegular + поиграйтесь с размером шрифта ниже.
Ответ написан
UncleByte
@UncleByte
Так вот же они есть во всех форматах на сайте производителя — www.paratype.ru/public/
Ответ написан
nazarpc
@nazarpc
Open Source enthusiast
Вы не пробовали ужать css c шрифтом в base64 c помощью gzip?
Ответ написан
Ваш ответ на вопрос

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

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