Разница в рендеринге Барлоу между страницей примера Google Fonts и использованием на отдельной странице

Мы используем шрифт Barlow, доступный бесплатно в Google Fonts, в веб-приложении. Вот как выглядит образец фразы при отображении на пример страницы Google. (Если вы хотите воспроизвести его, вам нужно будет ввести собственный текст самостоятельно и установить ползунок на 14px.)

Обратите внимание, в частности, на отчетливое пространство между нижней частью i и его точкой вверху, а также на четкость верхней части f.

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

Обратите внимание на грязное пространство между i и его точкой, а также грязную верхнюю кривую к f.

Я пытался просмотреть все стили рассматриваемых элементов и не могу найти ни одного стиля, который должен влиять на них по-разному. На вкладке сети ясно видно, что загружается полужирная версия шрифта; это не выглядит так, как если бы это могло быть искусственным жирным шрифтом.

Это может показаться тривиальным, но на самом деле у нас было довольно много жалоб на то, как шрифт выглядит в нашем приложении, особенно на то, что полужирный строчный i выглядит как l.

Кто-нибудь знает, что здесь может происходить?

Обновление: использование Chrome на Mac; Я могу подтвердить ту же проблему в Firefox. Это на внешнем дисплее... на ретине проблем нет, там намного больше деталей.