Виправляємо проблему відображення кирилиці в IE та Firefox - Веб-студія
При певному підключенні 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 повинні коректно відображати всі символи включаючи кирилицю.