Подключение шрифтов кириллицы в шаблонах blogger

среда, апреля 20, 2016 Nata 1 Comments

Статья о том, как в блоге исправить отображение кириллических шрифтов, если был использован шаблон, поддерживающий только шрифты с латиницей.






Зачастую шаблоны для blogger представлены на англоязычных сайтах, поэтому и шрифты в них подключены с латиницей. Если использовать такой шаблон в блоге, где информация представлена на русском языке, то шрифты отображаются не правильно. Вот пример, где первая часть строки написана шрифтом Times, а часть, выделенная желтым цветом - Lato:


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

Подключение шрифта Open Sans

Самым подходящим для основного текста страниц я нахожу шрифт Open Sans. У этого шрифта в наборе есть как латиница, так кириллица, нужно просто правильно подключить этот шрифт.

Для начала открываем HTML код шаблона (Шаблон - Изменить HTML), делаем поиск строки fonts.googleapis.com и смотрим, какие вообще шрифты используются в шаблоне (сейчас я делаю блог с использованием шаблона Voux Slider Blogger Template, который можно скачать отсюда: https://gooyaabitemplates.com/voux-slider-blogger-template/). В этом шаблоне используются разные шрифты:


Для начала заменим шрифт Lato на Open Sans, а потом похожие действия проделаем с остальными шрифтами. Возможно для заголовков получится найти другой интересный шрифт с поддержкой кириллицы.

Итак, в коде HTML вместо последней строки подключения шрифта Lato пишем такой код:

<link href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C700%2C400italic&amp;subset=latin,cyrillic' id='default_body_font-css' media='all' rel='stylesheet' type='text/css'/> 

После этого делаем замену "Lato" на "Sans Open" по всему шаблону:

     font-family:"Lato";

меняем на

     font-family:"Open Sans";

Если есть еще какие-то строки, относящиеся к шрифтам, то в них тоже делаем замену. Например, в этом шаблоне еще были строки наподобие этой:

<Variable name="body.font" description="Font" type="font" default="normal normal 14px Lato" value="normal normal 14px Lato"/>

Сохраняем шаблон, перегружаем сайт и смотрим результат. Теперь текст должен выглядеть нормально:

Подключение шрифта Ubuntu

Кроме основного текста проблемы есть еще в заголовках сообщений:


Здесь используется шрифт Montserrat, я вместо него хочу использовать Ubuntu. Для этого меняю строку:
<link href='http://fonts.googleapis.com/css?family=Montserrat%3A400%2C700&amp;ver=4.2.4' id='default_headings_font-css' media='all' rel='stylesheet' type='text/css'/>

на следующую:
<link href='http://fonts.googleapis.com/css?family=Ubuntu%3A400%2C700&amp;subset=latin,cyrillic' id='default_headings_font-css' media='all' rel='stylesheet' type='text/css'/>

Кроме этого соответственно делаю соответствующие замены по всему шаблону - вместо Montserrat везде должно быть Ubuntu.

Кстати, у нового шрифта нужно проверить какие типы начертания доступны (bold 400, bold 700, italic). Подбор шрифтов и изучение всех характеристик удобно делать на странице Google Fonts: https://www.google.com/fonts/

Итак, сохраняем шаблон и проверяем результат:

Замена шрифту Raleway

Еще одна проблема есть в заголовках виджетов:

Здесь я попробую использовать шрифт Neucha вместо Raleway. В принципе можно использовать тоже Ubuntu или даже Open Sans, чем меньше разных шрифтов на сайте, тем лучше, но все-таки оставлю простор для творчества. Если останется третий шрифт, то потом при желании легче будет делать замену по всему шаблону.

В коде смотрю как именно подключается этот шрифт:
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Raleway:400,500,600,700,300|Lora:400' rel='stylesheet' type='text/css'/>

Меняю эту строку на такую:
<link href='http://fonts.googleapis.com/css?family=Neucha:400&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'/>
А далее по всему шаблону делаю замену Raleway на Ubuntu:
font-family: Ubuntu;



Кстати, в шаблоне был подключен еще один шрифт - Domine:
<link href='http://fonts.googleapis.com/css?family=Domine%3A400%2C700&amp;ver=4.2.4' id='default_para_font-css' media='all' rel='stylesheet' type='text/css'/>
но этот шрифт нигде не используется, поэтому эту строку просто удаляю.

Все, сохраняем шаблон и смотрим результат. Теперь все выглядит прекрасно.