Как поменять шрифты Google Web Fonts в шаблонах?

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

1. Просмотр кода элемента. Чтобы воспользоваться этим способом, необходимо для начала установить плагины. В Google Chrome – Cufon, в Mozilla FireFox – Firebug. Нажать на «Исследовать элемент» или «Просмотр кода элемента» (в зависимости от браузера). В стилях CSS содержится название используемого в элементе шрифта.

2. Редактор Microsoft Word. Необходимо сохранить веб-страницу, после чего открыть ее в Word. Открывшийся файл покажет ипользуемый в оригинале шрифт.

3. При помощи различных онлайн-сервисов. Один из таких — WhatTheFont

4. Внешние особенности. На помощь приходят специальные сервисы, такие как: fonts.com или linotype.com. Чтобы распознать понравившийся шрифт, необходимо ответить на ряд вопросов, раскрывая при этом наличие в искомом шрифте засечек, особенности в написании литер и многое другое. Для кириллических шрифтов существуют специальные базы — Xfont.ru, iFont.ru, Fontov.net.

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

Итак, с выбором шрифта вы определились. Давайте разберемся как теперь изменить исходный шрифт Google Web Fonts на сайтах под управлением различных CMS.

Меняем шрифт Google Web Fonts в шаблоне PrestaShop

Задача. Необходимо изменить шрифт пунктов меню.

1. Чтобы найти шрифт, который используется для данного пункта меню, необходимо воспользоваться плагином Firebug (для Mozilla Firefox).

2. Открываем файл, в котором содержится ссылка на шрифт. В данном шаблоне ссылка на код шрифта Google находится в header.tpl.

3. Необходимо заменить существующий шрифт на другой сгенерированный на сайте http://www.google.com/webfonts.

Не забывайте обращать внимание на набор символов. К примеру, в нашем случае выбор пал на Cyrillic Extended. Этот шрифт поддерживает кириллицу.

4. Выбранный шрифт следует добавить в коллекцию (Add to Collection) и нажать на кнопку «Использовать» (Use).

После проделанных действий, выберите необходимый набор символов и набором клавиш Ctrl+C скопируйте сгенерированный код.

5. Если у вас есть намерение использовать исходный и новый сгенерированный код, тогда в файле добавьте линию с новым шрифтом, в противном случае просто замените исходный код на новый.

6. Теперь нужно заменить шрифт в файле css стилей. В случае с данным шаблоном для создания интернет-магазина на PrestaShop файл называется global.css. Нужно отыскать соответствующий код.

7. На странице Google скопируйте ваш шрифт и вставьте его в css файл.

8. На заключительном этапе необходимо очистить кэш Smarty. В админке PrestaShop перейти в Preferences – Performance и в поле Force compile поставить галочку напротив Yes.

Вот, что должно получиться:

Меняем шрифт Google Web Fonts в шаблоне osCommerce

Задача. Изменить шрифт для пунктов меню в шаблоне для интернет-магазина osCommerce.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Открываем файл, в котором содержится ссылка на используемый в меню шрифт Google. Находится он в файле includes\template_top.php.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. Если вы хотите использовать и исходный, и новый сгенерированный код, тогда в файле добавьте строчку с новым шрифтом, в противном случае просто замените исходный код на новый.

5. Меняем шрифт в файле css. В данном шаблоне файл называется superfish.css.

6. В Google Web Fonts скопируйте шрифт и вставьте его в css файл.

Вот так выглядит теперь страница с измененным шрифтом в меню:

Меняем шрифт Google Web Fonts в шаблоне JS Animated

Задача. Нужно изменить Google Web шрифт в представленном шаблоне JS Animated.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Ссылка на используемый в данном шаблоне шрифт Google находится в index.html

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. В index.html замените код на новый или просто добавьте новую строчку, чтобы использовать и новый, и исходный шрифт для сайта.

5. В файле css (в данном шаблоне называется он superfish.css) меняем шрифт на новый. Для этого копируем его на странице Google Web Fonts.

Новый шрифт вашего меню теперь должен выглядеть вот так:

Меняем шрифт Google Web Fonts в шаблоне Drupal

Задача. Изменить шрифт Google в шаблоне Drupal.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Шрифт в данном случае находится в файле style.css.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. Исходный код замените в файле на новый.

5. Необходимо изменить в файле style.css шрифт. Копируем его на Google Web Fonts и вставляем в файл.

Вот так теперь выглядит измененный файл стилей:

6. Теперь в Drupal нужно очистить кэш. В административной части шаблона Drupal в разделе Configuration > Performance необходимо нажать на кнопку «Clear All Caches».

Теперь посмотрим на новый шрифт вживую:

Меняем шрифт Google Web Fonts в шаблоне Magento

Задача. Меняем Google Web шрифт в шаблоне Magento.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. В данном шаблоне Magento ссылка на шрифт находится в файле head.phtml.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. Исходный код в файле необходимо изменить на новый. Вот так он будет выглядеть в файле.

5. Файл style.css — именно здесь в данном шаблоне располагается шрифт, который необходимо изменить.

Измененный код в style.css теперь выглядит следубщим образом:

6. Очищаем кэш и обновляем страницу сайта.

Меняем шрифт Google Web Fonts в шаблоне VirtueMart

Задача. Меняем шрифт пунктов меню в шаблоне VirtueMart.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Чтобы изменить Google Web font, откройте index.php и найдите ссылку на установленный шрифт.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. В Google Web Fonts нужно выбрать тот набор символов, который вам необходим. Заменяем старый код полученным новым.

5. В файле стилей css – в данном шаблоне он называется virtuemart.css — меняем шрифт.

Вот так теперь выглядит измененный файл virtuemart.css:

Осталось обновить страницу, чтобы увидеть новый шрифт в пунктах меню:

Меняем шрифт Google Web Fonts в шаблоне Joomla

Задача. Меняем шрифт Google в пунктах меню сайта.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Ссылка на использованный в меню Google web шрифт в Joomla шаблоне находится в файле index.php.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

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

5. Файл css в нашем случае называется sfmenu.css. В нем необходимо изменить шрифт.

Вот так будет выглядеть измененный файл:

Осталось обновить страницу сайта на Joomla, чтобы увидеть изменения.

Меняем шрифт Google Web Fonts в шаблоне ZenCart

Задача. Изменить шрифт Google в шаблоне ZenCart.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. В данном шаблоне код шрифта Google прописан в файле html_header.php.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. Сгенерированный код вместе с соответствующим набором символов копируем с Google Web Fonts и вставляем в отрывшийся файл.

5. В файле css также необходимо изменить шрифт. Называется он в данном случае stylesheet_header_menu.css. Осталось найти код, отвечающий за шрифт в меню и заменить его на новый.

6. Вот как будет теперь выглядеть измененный код:

Смотрим на измененный шрифт в пунктах меню непосредственно на сайте:

Меняем шрифт Google Web Fonts в шаблоне WordPress

Задача. Изменить шрифт в шаблоне для сайта, работающем на движке WordPress.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Файл с названием header.php содержит код используемого шрифта.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. В открытом файле header.php нужно изменить исходный код шрифта, для этого необходимо выбрать на Google Web Fonts набор символов и скопировать уже сгенерированный код.

5. Не забываем изменить шрифт и в файле css. Называется он в данном случае normlize.css.

6. На странице Google Web Fonts копируем нужный шрифт и вставляем в файл. Строчка с кодом теперь выглядит следующим образом:

Обновляем страницу, чтобы посмотреть на новый установленный шрифт.

Меняем шрифт Google Web Fonts в шаблоне OpenCart

Задача. Изменить шрифт меню в шаблоне для интернет-магазина OpenCart.

1. Выполните п.1 как было описано выше на примере шаблона PrestaShop.

2. Теперь необходимо открыть файл header.tpl и изменить код шрифта.

3. Выполните п.3, 4 как было описано выше на примере шаблона PrestaShop.

4. На Google Web Fonts подбираем набор необходимых символов и копируем сгенерированный код в файл. Если вы собираетесь использовать прежний код, можете просто добавить строчку нового кода в header.tpl, в другом случае просто замените исходный код на сгенерированный.

5. В файле css также меняем шрифт. В данном шаблоне для OpenCart он носит название stylesheet.css.

6. На странице шрифтов Google копируем необходимый шрифт и и вставляем в файл css.

Осталось взглянуть как выглядит теперь обновленный сайт:

Больше информации по работе с шаблонами можно почитать тут