2. Основные настройки сайта
Сегодня мы с вами пройдёмся по основным настройкам сайта на Tilda.
UPD. Загрузка собственных шрифтов
Тильда позволяет загружать собственные шрифты, если по каким-то причинам вас не устроил стандартный набор и Google Fonts. Чаще всего такое бывает, когда у компании есть свой фирменный стиль и набор шрифтов.
Конвертация шрифтов
Прежде, чем загружать шрифты на сайт, их нужно подготовить. Как правило, на компьютере шрифты хранятся в форматах .ttf, .otf или .eot. Нам же нужен .woff.
Выберите шрифт, определитесь, какие начертания вы будете использовать (тонкий, нормальный, жирный и т. п.). Для каждого варианта начертания должен быть отдельный файл.
Для конвертации можно воспользоваться рекомендуемым Тильдой сервисом Font Squirrel, но он, на мой вкус, немного тяжеловат в плане доп. настроек. Я обычно использую onlinefontconverter.com
Там всё просто до безобразия. Отмечаем галочками, какие форматы шрифтов нам нужны на выходе (в нашем случае .woff), нажимаем «Select font(s)».
Чтобы загрузить один или более шрифтов, вам достаточно перетащить их в поле Drop files here, либо нажать кнопку Choose files и загрузить шрифты.
После загрузки нажмите Done и процесс конвертации начнётся.
Немного ждём, когда завершится процесс конвертации, затем нажимаем Save your font, и Download attachment.
В скачанном архиве вы найдёте файлы шрифта в формате .woff.
Загрузка шрифта на Тильду
Откройте настройки сайта, перейдите в раздел «Шрифты и цвета». Нажмите кнопку «Расширенные настройки». Далее выберите вкладку «Your own font».
Далее нажмите кнопку «Загрузить файлы шрифта»
Вам не обязательно загружать шрифты для всех начертаний. Если вы используете, например, только normal и bold, загрузите только их.
Укажите Font Name, чтобы можно было выбрать ваш шрифт при настройке заголовков и текстовых блоков. Здесь же можно сразу отметить галочками назначение шрифтов — для заголовков и текста.
Сохраняем, затем возвращаемся к настройкам сайта и в поля HEADLINE FONT FAMILY NAME и TEXT FONT FAMILY NAME вписываем название шрифта. Сохраняем, публикуем все страницы, наслаждаемся :)
Иконка сайта
Надеюсь, вы уже установили приложения от Adobe, сегодня нам пригодится Illustrator. Во второй части занятия я предлагаю вам сделать иконку для вашего будущего сайта.
Ссылки:
- шрифты Google
- RSS-ленты
- сертификаты безопасности и защищённое соединение
- flaticon.com
Домашнее задание
- Пройдитесь по основным настройкам вашего сайта, подберите и настройте шрифты.
- Создайте иконку для сайта. Если у вас есть логотип, используйте его. Если нет, можно использовать иконку с flaticon.com. Либо нарисуйте что-то своё.
По всем возникающим вопросам пишите в чат. Не забывайте отмечать меня @timur_bv.