Настройка шрифтов
Шрифты настраиваются в разделе «Дизайн сайта». Эти настройки относятся к дизайн-системе проекта и помогают сохранить единый стиль текста на всех страницах сайта.
Вы можете выбрать шрифты, настроить начертания и задать размеры для разных типов текста: заголовков, подзаголовков, обычного текста и так далее.
Вы можете выбрать шрифты, настроить начертания и задать размеры для разных типов текста: заголовков, подзаголовков, обычного текста и так далее.
1
Выбор шрифта и начертаний
Шрифты и начертания отвечают за то, какие шрифты используются на сайте и насколько плотным выглядит текст. Например, можно выбрать отдельный шрифт для заголовков и другой — для основного текста, а также настроить жирность для разных элементов.
Чтобы перейти к настройкам выбора шрифта и начертаний, кликните на «Дизайн сайта» и выберите раздел «Шрифты, начертания»:
Чтобы перейти к настройкам выбора шрифта и начертаний, кликните на «Дизайн сайта» и выберите раздел «Шрифты, начертания»:
В новой вкладке откроется страница с настройками шрифтов. Здесь можно выбрать готовую шрифтовую пару или прокрутить страницу вниз и настроить собственный набор шрифтов из доступных в Базиуме.
Каждый набор состоит из четырёх шрифтов и/или начертаний. Это могут быть разные шрифты или один и тот же шрифт в нескольких вариантах толщины.
Толщина шрифта задаётся числовым значением: чем меньше число, тем тоньше начертание. Например, 100 — очень тонкий шрифт, а 900 — максимально жирный.
Нажмите на кнопку справа от пары, чтобы применить её к сайту:
Каждый набор состоит из четырёх шрифтов и/или начертаний. Это могут быть разные шрифты или один и тот же шрифт в нескольких вариантах толщины.
Толщина шрифта задаётся числовым значением: чем меньше число, тем тоньше начертание. Например, 100 — очень тонкий шрифт, а 900 — максимально жирный.
Нажмите на кнопку справа от пары, чтобы применить её к сайту:
2
Как загрузить свой шрифт
Если нужного шрифта нет в стандартном списке, вы можете загрузить свой шрифт в Базиум. И подготовьте файлы шрифтов для разных начертаний (light, regular, bold) в формате WOFF2 или TTF и использовать его на сайте. Если ваш шрифт в другом формате, вы можете конвертировать его с помощью онлайн-конвертера.
Пример сервисов, где можно посмотреть шрифты: Google fonts, Шрифтотека
Шаг 1. Загрузите шрифт в файлы сайта
Для этого в основном меню проекта зайдите в раздел «Сайт», далее найдите пункт «Файлы»:
Пример сервисов, где можно посмотреть шрифты: Google fonts, Шрифтотека
Шаг 1. Загрузите шрифт в файлы сайта
Для этого в основном меню проекта зайдите в раздел «Сайт», далее найдите пункт «Файлы»:
Откроется страница, нажмите на кнопку «Загрузить файлы»:
Шаг 2. Скопируйте ссылку на файл
После загрузки скопируйте ссылку на файл шрифта. Она будет выглядеть примерно так:
/files/009/742/216/9742216/original/НазваниеШрифта.ttf
Эта ссылка понадобится для подключения шрифта.
После загрузки скопируйте ссылку на файл шрифта. Она будет выглядеть примерно так:
/files/009/742/216/9742216/original/НазваниеШрифта.ttf
Эта ссылка понадобится для подключения шрифта.
Важно:
если подключаете несколько начертаний, добавьте их все в файлы.
Шаг 3. Откройте настройки шрифтов и начертаний
Откройте страницу, кликните на «Дизайн сайта», а затем на «Шрифты, начертания».
Прокрутите страницу до конца и выберите пункт «Подключить свои шрифты через вставку CSS-кода».
Откройте страницу, кликните на «Дизайн сайта», а затем на «Шрифты, начертания».
Прокрутите страницу до конца и выберите пункт «Подключить свои шрифты через вставку CSS-кода».
Шаг 4. Добавьте CSS-код для подключения шрифта
Подготовьте CSS-код по примеру ниже:
Подготовьте CSS-код по примеру ниже:
@font-face {
font-family: 'НазваниеШрифта 500';
src: url('/files/009/742/216/9742216/original/НазваниеШрифта.ttf');
font-weight: 500;
font-style: normal;
}
font-family: 'НазваниеШрифта 500';
src: url('/files/009/742/216/9742216/original/НазваниеШрифта.ttf');
font-weight: 500;
font-style: normal;
}
Где:
font-family — название шрифта, которое будет отображаться в настройках. Для удобства в название можно добавить толщину, например НазваниеШрифта 500.
src — ссылка на загруженный файл шрифта.
font-weight — толщина шрифта в числовом значении, например 400, 500, 700.
font-style — стиль шрифта. В этом поле укажите normal.
И нажмите на кнопку «Применить» – шрифт будет подключён к сайту и станет доступен для использования в настройках шрифтов.
font-family — название шрифта, которое будет отображаться в настройках. Для удобства в название можно добавить толщину, например НазваниеШрифта 500.
src — ссылка на загруженный файл шрифта.
font-weight — толщина шрифта в числовом значении, например 400, 500, 700.
font-style — стиль шрифта. В этом поле укажите normal.
И нажмите на кнопку «Применить» – шрифт будет подключён к сайту и станет доступен для использования в настройках шрифтов.
Важно:
если у одного шрифта есть несколько начертаний, например Regular, Medium и Bold, загрузите каждый файл отдельно и добавьте для каждого свой блок @font-face с нужным значением font-weight.
Шаг 5. Настройте свой набор шрифтов и начертаний
Вернитесь на страницу с настройками шрифтов и начертаний. Выберите внизу страницы «Настроить свой вариант» и для каждого типа текста (заголовок, подзаголовок, текст и текст-акцент) выбираете из выпадающего списка ваш загруженный шрифт (обычно они расположены в самом низу списка).
Вернитесь на страницу с настройками шрифтов и начертаний. Выберите внизу страницы «Настроить свой вариант» и для каждого типа текста (заголовок, подзаголовок, текст и текст-акцент) выбираете из выпадающего списка ваш загруженный шрифт (обычно они расположены в самом низу списка).
3
Настройка размеров шрифтов
Размеры текста лучше подбирать по смыслу: заголовок должен быть самым заметным, подзаголовок — чуть меньше, а основной текст — удобным для чтения.
Не стоит делать основной текст слишком мелким. Если посетителю сложно читать описание услуги, условия или характеристики товара, он может просто уйти со страницы.
Чтобы перейти к настройкам размеров шрифтов, кликните на «Дизайн сайта» и выберите раздел «Шрифты, размеры»:
Не стоит делать основной текст слишком мелким. Если посетителю сложно читать описание услуги, условия или характеристики товара, он может просто уйти со страницы.
Чтобы перейти к настройкам размеров шрифтов, кликните на «Дизайн сайта» и выберите раздел «Шрифты, размеры»:
Откроются настройки размеров шрифтов. Здесь можно задать до пяти типовых размеров и затем использовать их в разных блоках сайта.
Для каждого размера можно настроить основные параметры текста: размер шрифта, высоту строки, отдельный размер и высоту строки для мобильных устройств, межбуквенное расстояние, а также включить отображение текста заглавными буквами.
Настройки применяются сразу, поэтому вы сразу видите, как меняется внешний вид текста.
Для каждого размера можно настроить основные параметры текста: размер шрифта, высоту строки, отдельный размер и высоту строки для мобильных устройств, межбуквенное расстояние, а также включить отображение текста заглавными буквами.
Настройки применяются сразу, поэтому вы сразу видите, как меняется внешний вид текста.
Совет:
не используйте слишком много разных шрифтов, размеров и начертаний. Лучше настроить понятную систему: крупные заголовки, читаемый основной текст и аккуратные дополнительные элементы. Так сайт будет выглядеть профессиональнее и пользователю будет проще воспринимать информацию.