Исправляем кривой рендер шрифтов в Firefox

Огненный лис — firefox уже давно не торт…, но сегодня я заметил, что шрифт Poppins от Google Fonts в верстке моего проекта отображается криво и по разному на Mac и Windows системах. Поэтому пришлось все исправлять…

Естественно, каждый браузер имеет свои причуды, и одна из причуд Firefox — отображать regular шрифты в полужирном/жирном варианте. Честно, я и раньше не слишком «парился» по этому поводу т.к небольшие различия были, но они были не критичными. Например, ниже приведу пример рендера шрифта VK из в Firefox и Chrome браузеров (слева направо):

Forefox "утолщает" regular шрифт

 

Видно утолщение? В принципе да. Раздражает? Да, даже очень. Поскольку в VK исправить не удастся, придется возвращаться и исправлять на своей верстке 😆

Если разбираться в проблеме поглубже, то такой баг, происходит на полужирных Google Fonts (semibold) в Firefox на Mac, а в Windows на медиум шрифтах (medium). Также, проблемы появляются если вы в верстке используете Typekit. В любом случае я потратил немного времени и составил короткий список шрифтов, которые неправильно отображаются в Firefox:

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

Решение проблемы отображения bold шрифтов в Firefox

На самом деле, проблема решается в пару css строк:

-moz префиксы работают только для Firefox, а -webkit соответственно только на Chrome и Safari которые используют Webkit движок рендеринга для этих браузеров.

Также, есть решение и для Internet Explorer, который также имеет проблемы с некоторыми шрифтами и делает их толще:

Решение на SASS

Также, накидал простое решение на sass в виде миксина, которое также решает проблему как и css выше.

Подписаться на новые статьи