С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

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

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

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

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

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

 

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

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


Рисунок 1.

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

.col-xs {
}

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

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

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

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


Рисунок 4.

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

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


Рисунок 5.

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


Рисунок 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)


Рисунок 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)


Рисунок 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'
}

Всё готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.