Как вам помочь ?

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

Статья актуальна для версии магазина: 10.0 | 8.0 | 7.0-6.0 | 5.0-4.1

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

 

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

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

Изменение размера шрифта
Рисунок 1.

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

span.col-xs {
}

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

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

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

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

Как прописать шрифт размером 20 px
Рисунок 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 - выбираем шрифт.

Переходим на сайт google.com по адресу: http://www.google.com/fonts
Рисунок 4.

На странице шрифта представлены несколько его разных стилей - разной жирности и с применением курсива. С помощью кнопки "Select this style" выбираем нужный нам вариант (рис. 5).

Затем откроется окно. Переходим на вкладку "Customize", где необходимо выбрать доступные для выбранного шрифта стили
Рисунок 5.

После выбора стилей, копируем код для встраивания шрифтов на сайт - вариант "Link" (рис. 6).

На вкладке "Embed" генерируется код (link)
Рисунок 6.

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

“Правая часть подвала”, в режиме “Источник”
Рисунок 7.

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

Например:

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

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

В результате получаем
Рисунок 8.

Заметка

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

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

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

2 вариант

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

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

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

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

Заметка

При скачивании бесплатного шрифта, как правило, загружается только один файл с расширением .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 (рис. 10).

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

Заметка

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

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

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

Для магазина в облаке: так как в облаке доступ к исходному коду не предоставляется, файлы шрифта необходимо будет выслать в техническую поддержку на 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'
}

Всё готово.

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: шрифт, изменить размер шрифта, стиль шрифта, размер шрифта, стиль, изменить стиль шрифта, загрузить шрифт, изменить шрифт, размер текста в карточке, размер текста

Мы используем cookies. Подробнее...
0