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

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

Актуально для версии магазина: 6.0 | 5.0-4.1

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

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

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

 

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

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

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

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

.col-xs {
}

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

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

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

.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).

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

1 - в строке поиска вводим название нужного шрифта, 2 - выбираем шрифт

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

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

На вкладке "Embed" генерируется код (link) (см. рис.6), который размещаете в любой действующий статический блок, например, “Правая часть подвала”, в режиме “Источник” (см. рис.7)

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

“Правая часть подвала”, в режиме “Источник”
Рисунок 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'
}

Всё готово.

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

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

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

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

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

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

Тэги: шрифт,изменить размер шрифта,стиль шрифта,размер шрифта,стиль,изменить стиль шрифта