Как изменить размер и стиль шрифта на сайте

Рассмотрим один из вариантов изменения дизайна сайта, такой как изменение стиля шрифта и его размера в блоках.

• Изменение размера шрифта
• Изменение стиля шрифта

 

Изменение размера шрифта

Например, увеличим шрифт комментария в форме обратного звонка (рис. 1).

Рисунок 1.

В нашем случае название класса col-xs, копируем его, и далее необходимо перейти в панели администрирования в пункт меню "Мои сайты" - "Редактировать" - вкладка "Параметры", раздел "CSS", и прописать стиль для класса следующим образом:

span.col-xs {
}

Свойство, отвечающее за размер шрифта: font-size

Указывать размер будем в пикселях (px).

В результате для того, чтобы прописать шрифт размером 20 px, в Редакторе файла стилей, необходимо прописать следующее (рис. 2):

span.col-xs {
font-size: 20px;
}

Рисунок 2.

Сохраняем новые стили в Редакторе и проверяем, применились ли изменения в клиентской части (рис. 3).

Рисунок 3.

Всё готово.

Для остальных элементов сайтов изменения производятся аналогичным образом: необходимо найти соответствующий класс элемента с помощью команды F12 в браузере и изменить его стили. Подробнее - в статье Работа с CSS.

 

Изменение стиля шрифта

Например, у вас есть название шрифта, который вам нравится, и вы хотели бы, чтобы на вашем сайте тексты отображались в том же шрифте.

Как в этом случае применить новый шрифт на сайте? Сначала выясним платный или бесплатный выбранный вами шрифт. Ищем по названию шрифта на бесплатных сайтах, например, http://www.ofont.ru/.

Если шрифт среди бесплатных не нашли, то продолжаем поиск на платных сайтах:

http://www.myfonts.com/
https://www.linotype.com/

Рассмотрим оба варианта:

Бесплатный шрифт
Платный шрифт

 

Бесплатный шрифт

1 вариант

Переходим на сайт google.com по адресу: http://www.google.com/fonts и выбираем нужный шрифт из списка (рис. 4). 1 - в строке поиска вводим название нужного шрифта, 2 - выбираем шрифт.

Рисунок 4.

На странице шрифта с помощью кнопки "Cet font" добавляем в корзину (рис. 5).

Рисунок 5.

После, на открывшейся странице нажимаем на кнопку "Get embed code" (рис. 6).

Рисунок 6.

На открывшейся странице выбираем стиль шрифта в левом окне, в окне справа в завивисмости от выбранного шрифта будет меняться код, копируем код для встраивания шрифтов на сайт - вариант "Link" (рис. 7).

Рисунок 7.

Скопированный код нужно разместить на сайте в каком-то статическом блоке, например - RightBottom (рис. 8).

Рисунок 8.

Далее в Редакторе файла стилей прописываем классы или элементы, для которых хотите применить стиль.

Например:

.col-xs {
font-family: 'Roboto', sans-serif;
}

В результате получаем (рис. 9):

Рисунок 9.

Заметка

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

body {
font-family: 'Roboto', sans-serif;
}

Если на сайте google не нашли нужного шрифта, то данный способ не подходит.

2 вариант

1) Скачиваете файлы шрифта.

Для поиска нужного бесплатного шрифта подойдет сайт http://www.ofont.ru/

Как правило, это файлы с расширениями .eot, .otf, .svg, .ttf, .woff (рис.10).

Рисунок 10.

Заметка

При скачивании бесплатного шрифта, как правило, загружается только один файл с расширением .ttf. Для того, чтобы получить прочие файлы, существуют специальные сервисы конвертеры. Например, один из таких сервисов: http://www.font2web.com/

Вы загружаете только файл .ttf в конвертер по адресу http://www.font2web.com/,  затем скачиваете все 5 файлов, которые отображены на рисунке 9, необходимых для подключения шрифта. 

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

Для магазина в облаке: так как в облаке доступ к исходному коду не предоставляется, файлы шрифта необходимо будет выслать в техническую поддержку на support@advantshop.net, с просьбой загрузить в соответствующий раздел. Например, создать папку fonts в корне сайта.

Для магазина на лицензии: файлы Вы загружаете самостоятельно на хостинг, где установлен сайт, в соответствующую папку с файлами сайта.

2) После того как файлы загружены, в Редакторе файла стилей необходимо подключить данные файлы следующим образом:

@font-face {
font-family: 'OpenSans-Bold';
src: url("../fonts/OpenSans-Bold/OpenSans-Bold.eot");
src:  url("../fonts/OpenSans-Bold/OpenSans-Bold.eot") format('embedded-opentype'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.woff") format('woff'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.ttf") format('truetype'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.svg") format('svg');
}

В скобках атрибута url указывается путь к файлу в файлах сайта.

Важно

font-face - это не класс, искать на сайте его не нужно.

Прописать в Редакторе файла стилей необходимо именно так, как указано, изменив только пути к файлам.

Далее, для того чтобы применить шрифт для какого-либо блока на сайте, необходимо в стилях элемента прописать стиль:  font-family: 'OpenSans-Bold';

То есть следующим образом:

.col-xs {
  font-family: 'OpenSans-Bold';
}

Заметка

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

body {
font-family: 'OpenSans-Bold'
}

Платный шрифт

1) Приобретаете шрифт и получаете файлы шрифта. Приобрести шрифт можно на подобных сервисах:
http://www.myfonts.com/
https://www.linotype.com/

Как правило, это файлы с расширениями .eot, .otf, .svg, .ttf, .woff (рис. 11).

Рисунок 11.

Заметка

Если при скачивании Вы обнаружили только один файл с расширением .ttf, то для того чтобы получить прочие файлы, существуют специальные сервисы - конвертеры. Например, один из таких сервисов: http://www.font2web.com/

Загружаем только файл .ttf в конвертер по адресу http://www.font2web.com/ ,  затем скачиваем все 5 файлов, которые отображены на рисунке 11, необходимых для подключения шрифта. 

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

Для магазина в облаке: так как в облаке доступ к исходному коду не предоставляется, файлы шрифта необходимо будет выслать в техническую поддержку на support@advantshop.net, с просьбой загрузить в соответствующий раздел. Например, создать папку fonts в корне сайта.

Для магазина на лицензии: файлы Вы загружаете самостоятельно на хостинг, где установлен сайт, в соответствующую папку с файлами сайта.

2) После того как файлы загружены, в Редакторе файла стилей необходимо подключить данные файлы следующим образом:

@font-face {
font-family: 'OpenSans-Bold';
src: url("../fonts/OpenSans-Bold/OpenSans-Bold.eot");
src:  url("../fonts/OpenSans-Bold/OpenSans-Bold.eot") format('embedded-opentype'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.woff") format('woff'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.ttf") format('truetype'),
url("../fonts/OpenSans-Bold/OpenSans-Bold.svg") format('svg');
}

В скобках атрибута url указывается путь к файлу в файлах сайта.

Важно

font-face - это не класс, искать на сайте его не нужно.

Прописать в Редакторе файла стилей необходимо именно так, как указано, изменив только пути к файлам.

Далее, для того чтобы применить шрифт для какого-либо блока на сайте, необходимо в стилях элемента прописать стиль: font-family: 'OpenSans-Bold';

То есть следующим образом:

.col-xs {
font-family: 'OpenSans-Bold';
}

Заметка

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

body {
font-family: 'OpenSans-Bold'
}

Всё готово.