Как использовать кастомные шрифты в вебе и не сойти с ума

[mezastel]

Holy cow, Медуза на Хабре!

[ragequit]

Еще бы приложение для Windows Phone… Хотя о чем это я.

[artoym]

Подождите… Но ведь уже давно есть! Не без багов, но что поделать.

[rgyph]

Только вот пользоваться им невозможно, к сожалению.

Мало того что при скролле дёргается, так ещё когда из уведомлений новость открываешь, оно включается и тут же выключается, оставляя тебя ни с чем))

[artoym]

Пффф… С этими багами хоть можно жить (скроллить аккуратнее… ещё аккуратнее и открывать из приложения новости) =)
А вот то что не работают тесты и трансляции, а некоторые новости из раздела шапито не открывает подвисая — это отвратительно.
Честно говоря меня удивляет как можно было так сделать приложение, которое в общем-то только текст с картинками показывает.

[rgyph]

Только вот я не смотрю новости отдельно в приложении. Обычно перехожу на интересное из вк (хорошо что перекидывает в браузер). Т.е. формально новости из шторки для меня основной функционал приложения)) И ладно, запускаешь специально приложение чтобы новость посмотреть, так его ещё и лихорадить начинает при достаточно медленном скролле.

[artoym]

Думаю, что многие разработчики (владельцы) приложений под windows думают, что-то типа: «И тааак сойдёт» или «Да их там всего 2 или 3 пользователя, баг и не заметят», а может и «Совсем офигели, да они должны боготворить нас даже за это!». Самая тяжёлая ситуация конечно с инстаграмом.

[rgyph]

А что с инстаграмом?

[artoym]

Сначала не было 2года обновлений (ни багфиксв, ни новых фич), а потом (под выход 10ки) таки сделали, но: вероятность падения при выкладывании фото 90%, на видео 100% падение, библиотеку фото грузит минуту (например вотсапп справляется за секунду). Это я по верхам только прошелся. Причем такое поведение и на 640, и на 930.

[rgyph]

Забавно. У меня на 430 всё отлично, кроме видео. Видео не добавляет в принципе, а во всём остальном ни падений, ни лагов, и библиотеку грузит норм (хотя тут возможно влияет малое количество фото).

Пользуюсь довольно активно.

[Razunter]

Как раз таки подгрузка шрифтов на «Медузе» меня и сводит с ума: читаю новости через RSS-ридер, при каждом открытии страницы шрифты подгружаются где-то через секунду-две… Нигде такого не замечал больше.

[OlegAxenow]

Полторы секунды грузится CSS-файл со шрифтами почти мегабайтного размера.

P.S. У меня не самый быстрый интернет — 20Мбит/c где-то.

[OlegAxenow]

Хотя тут я погорячился — CSS-то может и кэшируется, это уж как ридер сделан…

[samat]

что за ридер?

[Razunter]

Inoreader сейчас. Вообще, под Android нет нормальных RSS-ридеров :(

[goodsprite]

Поддерживаю. Медуза — единственный сайт, где я вижу скачки шрифта.

Открываю из клиента Твиттера для андроида.

[OlegAxenow]

Почему не любят упоминать про вариант с ОС-зависимыми шрифтами (первый способ из статьи) — не понимаю.

[dom1n1k]

Потому что в статье стоит задача «нужно использовать конкретный шрифт» и её решают. По ссылке не вариант решения этой задачи, а полностью другая постановка — «я тут подумал и решил что на шрифты можно подзабить». Вполне имеет право на существование, но это другое.

[OlegAxenow]

Я же не говорю, что половину статьи надо альтернативному подходу посвятить. Просто бывает, что придумывают себе не очень важную цель и потом убивают на её достижение кучу ресурсов.

Disclaimer: когда реально без подгрузки шрифта никак, тут спорить не буду.
Вот, кстати, хорошая статья, где по полочкам разобраны разные подходы: A Comprehensive Guide to Font Loading Strategies.

И речь немного не о том, чтобы на шрифты подзабить, а о том, что периодически полезно заменять ход мыслей «надо показать какие мы особенные и какой у нас хороший вкус», на «вкусы у всех разные и давайте ещё подумаем, как будет удобнее пользователю».

P.S. И «я тут подумал» имеет смысл заменить на "дизайнеры Medium подумали".

[SamVimes]

Медуза учит как использовать шрифты? Серьёзно? :-) У вас текст не просто моргает, он исчезает на 1-2 секунды и появляется с новым шрифтом. Это жесть. В остальном у вас все круто, но как раз со шрифтами вам надо что-то делать

[samat]

где именно? какой сценарий использования?

[SamVimes]

Мобильный хром, девайс Huawei Honor 4C (средний по мощности телефон), после загрузки любой страницы показываются дефолтные шрифты, потом, видимо, подгружаются нормальные, текст пропадает (причем реально на долго, 1-2 секунды) и появляется с нормальным шрифтом.

[r4nd0m]

На главной сначала нет текста, потом появляется с загруженным шрифтом. В статьях — сначала системный шрифт, потом меняется на загруженный. Android 5.1.1, Chrome 54.0.2840.85

[NeuroTechnic]

Я может чего то не понимаю, но чем шрифты на этой Медузе такие особенные, чтобы стоило так париться? Или это больше на мобильных девайсах заметно?

[SamVimes]

Фиг знает, выглядит приятно, но наверное весят много

[NeuroTechnic]

Ну не знаю, я видимо не дизайнерский эстет…
Вот читаю хабр, ну шрифт, как шрифт — Verdana (и то это я узнал, заглянув в код). Переключился на вкладку с Медузой. Ну шрифт как шрифт, если бы не эта статья, то я бы даже не обратил внимание, что там какой то нестандартный PREgal.
Думаю 90% пользователей тоже не замечают, но при этом какие то свистопляски с бубном надо делать разрабам и всё равно проблемы остаются. Стоит ли овчинка выделки? Очень сомневаюсь…

[Rampages]

Если на сайте в одном текстовом блоке могут встречаться иероглифы, кириллица и латиница, то кастомные шрифты вообще не вариант. Как это будет выглядеть на разных версиях девайсов и операционных системах с разной локалью тоже надо разбираться.

В связи с этим для себя отложил эти кастомные шрифты в долгий ящик т.к. не вариант.

[somniator]

Жутко раздражает, когда страница сначала рендерится fallback-шрифтом, а через пару секунд всё переверстывается подгруженным шрифтом. Имхо, надо либо добиваться подгрузки шрифта ДО рендеринга, либо признать, что современный веб не готов для этого и отложить до лучших времен.