Виправляємо кривий рендер шрифтів у Firefox - Блог розробника

Вогняний лис — firefox вже давно не торт…, але сьогодні я помітив, що шрифт Poppins від Google Fonts у верстці мого проекту відображається криво і по-різному на Mac і Windows системах. Тому довелося все виправляти.

Природно, кожен браузер має свої чудасії, і одна з чудасій Firefox - відображати regular шрифти в напівжирному/жирному варіанті. Чесно, я й раніше не надто «парився» з цього приводу, оскільки невеликі відмінності були, але вони були не критичними. Наприклад, нижче наведу приклад рендерушрифту VK зFirefox і Chrome браузерів (зліва направо):

firefox

Видно потовщення? В принципі так. Дратує? Так навіть дуже. Оскільки VK виправити не вдасться, доведеться повертатися і виправляти на своїй верстці 😆

Якщо розбиратися в проблемі глибше, то такий баг відбувається на напівжирних Google Fonts (semibold)у Firefox на Mac, а вWindows на медіум шрифтах (medium). Також, проблеми з'являються якщо ви у верстці використовуєте Typekit. У будь-якому випадку я витратив трохи часу і склав короткий списокшрифтів, які неправильновідображаються у Firefox :

  • Droid Sans
  • Gill Sans
  • Montserrat
  • Poppins
  • Proxima Nova

Вирішення проблеми відображення bold шрифтів у Firefox

Насправді проблема вирішується в пару css рядків: