Виправляємо проблему відображення кирилиці в IE і Firefox

Наша взаимовыгодная связь https://banwar.org/

При певному підключенні Google Fonts в Internet Explorer або Firefox проявляється проблема, пов'язана з відображенням російських символів. У цій статті ми поділимося рецептом її виправлення. Хоча мова піде про особливості підключення Google Fonts для CMS Joomla! + Шаблон від YOOtheme, викладений принцип вирішення проблеми з кириличними шрифтами можна застосувати для проектів на будь-який інший платформі.

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

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

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

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

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

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

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

Тепер нам потрібно перекрити підключення шрифту таким чином, щоб не втратити зміни в майбутньому. Якщо ми просто змінимо файл theme.css, то при подальшому оновленні шаблону або черговий компіляції less наші зміни будуть затерті. Але саме для таких випадків в YOOtheme шаблонах передбачена система додавання власних css файлів, які перекривають стилі шаблону. Досить розмістити файл custom.css в папці поточного стилю оформлення шаблону. Шлях до файлу буде мати наступний вигляд:

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

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