Исправляем проблему отображения кириллицы в IE и Firefox

При определенном подключении Google Fonts в Internet Explorer или Firefox проявляется проблема, связанная с отображением русских символов. В этой статье мы поделимся рецептом ее исправления. Хотя речь пойдет об особенностях подключения Google Fonts для CMS Joomla! + шаблон от YOOtheme, изложенный принцип решения проблемы с кириллическими шрифтами можно применить для проектов на любой другой платформе.

При разработке сайтов мы часто используем шаблоны от компании YOOtheme. Они обладают целым рядом преимуществ, которые здесь перечислять мы не будем. Для настройки внешнего вида шаблона в нем предусмотрен специальный кастомизатор. В нем, кроме всего прочего, можно выбрать шрифты из стандартных системных или Google Fonts, которые чаще всего приходится использовать. Но кроме названия никаких дополнительных параметров для подключаемого шрифта указать нельзя.

В результате после установки шаблона в его основном css файле, который расположен по пути

/templates/[имя_шаблона]/css/theme.css

в верхней его части находится строка подключения выбранного в настройках шрифта:

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300';

Именно в этой строке подключения шрифта скрыта проблема отображения русских символов в браузерах Internet Explorer и Firefox. При этом Chrome и Opera успешно справляются с отображением кириллических символов даже при таком подключении.

Для исправления бага в Internet Explorer и Firefox обратимся к странице Google Fonts для более точной настройки строки подключения шрифта. Здесь в левом меню в пункте Script мы выбираем Cyrillic и находим нужный шрифт в списке.

Нажимает на иконку Quick Use для перехода на станицу настройки шрифта.

На вкладке @import находится строка подключения шрифта, которая явно отличается от той, которая используется в css файле шаблона. Она может иметь разный набор параметров в зависимости от выбранных настроек. Например, такой:

@import url('http://fonts.googleapis.com/css?family=Open+Sans:700,700italic,600,600italic,400,400italic,300,300italic&subset=cyrillic,cyrillic-ext');

Теперь нам нужно перекрыть подключение шрифта таким образом, чтобы не потерять изменения в будущем. Если мы просто изменим файл theme.css, то при дальнейшем обновлении шаблона или очередной компиляции less наши изменения будут затерты. Но именно для таких случаев в YOOtheme шаблонах предусмотрена система добавления собственных css файлов, которые перекрывают стили шаблона. Достаточно разместить файл custom.css в папке текущего стиля оформления шаблона. Путь к файлу будет иметь следующий вид:

/templates/[имя_шаблона]/styles/[имя_стиля]/css/custom.css

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

После добавления файла и вставки в него новой строки подключения шрифта браузеры Internet Explorer и Firefox должны корректно отображать все символы включая кириллицу.