Содержание статьи
Иногда создание сайта заходит так далеко, что люди хотят не только донести информацию до конечного потребителя, но и передать ему свой фирменный стиль.
В этой статье мы разберем один из элементов фирменного стиля сайта - шрифты.
В конструкторе сайтов Mobirise есть достаточное количество шрифтов, однако мы покажем как можно увеличить количество шрифтов в программе.
Первым делом нужно определиться, хотите Вы поменять шрифт на всем сайте или же на каком-то конкретном блоке.
1) Редактирование шрифта определенного блока
Необходимые инструменты:
*В качестве примера используется тема Clarus
Первым делом, нужно создать сайт на этой теме и добавить любой блок.
Мы используем первый блок из группы Начальные блоки.
После того, как блок добавлен, нажимаем на кнопку Редактировать код и ищем тег, стиль которого будем изменять.
Я решил выбрать тег <H1>, стиль тега - .mbr-editable-content.
Самое время выбрать шрифт. Идем на Google Fonts и ищем понравившийся шрифт, после того как определитесь, нажмите на красный плюсик, чтобы Вам были доступны стили данного шрифта.
Мне понравился шрифт Lemonada, его стиль для .css выглядит так:
font-family: 'Lemonada', cursive;
Возвращаемся к Редактору кода, в поле для .css указываем следующее:
.mbr-editable-content {
font-family: 'Lemonada', cursive;
}
Также, вы можете настроить font-weight для конкретных стилей, для этого при добавлении шрифта в сервисе Google Fonts во вкладке Customize выберите нужные Вам параметры.
Нажмите на зеленую кнопку, чтобы сохранить изменения.
Теперь нам нужно подключить загрузку шрифта на наш сайт, здесь нам понадобится бесплатное расширение Google Analytics и код шрифта:
<link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet">
Открываем Google Analytics, и в поле “До body” вставляем ссылку для подключения шрифта.
Нажимаем “OK”.
После этого, можете просмотреть свой сайт в браузере и проверить специальным расширением (Fontface Ninja) шрифт данного тега.
2) Редактирование шрифта на всем сайте
Необходимые инструменты:
Допустим, Вы хотите заменить шрифт на всем сайте. Для этого выгрузите сайт в удобное место на компьютере и подготовьте программу Notepad++.
Я использую тему Clarus, сss файлы которой находятся в assets\clarus\css.
Открываем файл style.css (через Notepad++), в самом начале документа видим строку:
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Raleway);
В конкретной строке подключено 2 шрифта - Montserrat и Raleway.
Нам нужно заменить все упоминания данных шрифтов на новый шрифт.
Первым делом идем на Google Fonts, выбираем нужный шрифт (в моем случае Lemonada), кликаем на красный плюсик и смотрим его стили.
Нас интересует его css:
font-family: 'Lemonada', cursive;
и строка подключения через Import:
@import url('https://fonts.googleapis.com/css?family=Lemonada:300,400,600,700');
Открываем файл style.css в Notepad++, заменяем строку импорта шрифта на нашу строку.
В моем случае я меняю на эту строку:
@import url('https://fonts.googleapis.com/css?family=Lemonada:300,400,600,700');
Затем, в Notepad++ жмем комбинацию клавиш Ctrl+F, в открывшемся окне выбираем вкладку “Найти” и ищем строки, в которые входит слово Montserrat. В результате поиска мы увидим строку вида:
font-family: 'Montserrat', sans-serif;
После этого, копируем данную строку и переходим во вкладку “Найти в файлах”, указываем что необходимо найти:
font-family: 'Montserrat', sans-serif;
на что нужно заменить:
font-family: 'Lemonada', cursive;
и укажите папку для поиска, в моем случае это C:\mobirise\assets.
Жмем на кнопку “Заменить в файлах”, после этого произойдет замена.
Ровно также ищем второй шрифт (Raleway) и меняем на точно такую же строку:
font-family: 'Lemonada', cursive;
Если шрифтов добавлено больше чем два, повторяйте данное действие до тех пор, пока не замените все шрифты на нужные Вам.
После этого, можете открыть страничку Вашего сайта и проверить встали шрифты или нет.
3) Редактирование шрифта на Mobirise 4
В Mobirise 4 версии разработчики предоставили пользователям возможность добавления шрифтов удобным способом. По нажатию на кнопку Шрифты открывается окно, в нем можно экспортировать шрифты с компьютера (*.woff или *.ttf), а также загрузить шрифты с ресурса Google Fonts.
Работать со шрифтами стало намного проще и удобнее.
