Помимо богатой библиотеки уже встроенных шрифтов в Тильду можно интегрировать дополнительные. Например, от Google Fonts. Как? Вот сейчас и разберемся.
Google Fonts — огромный каталог различных шрифтов для любых сайтов (и коммерческих тоже). Их все можно использовать бесплатно!
Интеграция шрифтов Google Fonts
Есть несколько способов интегрировать шрифты от Google Fonts в Tilda.
1 способ. Из библиотеки Tilda
Давайте перейдем в настройки сайта — Шрифты и Цвета — «Расширенные настройки». Так мы откроем перечень способов для интеграции новых шрифтов.
Чтобы открыть библиотеку шрифтов Google Fonts надо перейти в Google Fonts (все гениальное просто, и все простое гениально), а затем найти иконку «Искать в шрифтах», нажав на нее. Высветится раздел, с помощью которого мы и будем выбирать шрифт: Roboto, Open Sans, Montserrat, Source Sans Pro и остальные.
Кстати, если вам вдруг не потребуется кириллица, вы легко сможете выключить ее использование. Так база доступных шрифтов станет шире.
Помимо выбора классный fonts, есть возможность присмотреть и требуемые начертания. Как закончите, смело клацайте на опцию «Выбрать шрифт» и галочку рядом с ней. Это позволит использовать шрифт как для заголовков, так и для самого текста.
Что произойдет дальше? В поле ссылки для Google Fonts автоматически сгенерируется необходимая ссылка, которая и позволит интегрировать выбранные шрифты.
Не забудьте сохранить изменения, иначе все придется повторить!
2 способ. Посредством ссылки из Google Fonts
Перемещаемся в Google Fonts и выбираем шрифт, приятный нашему глазу. Нужна кириллица? Включаем фильтр Cyrillic (он найдет нужные варианты).
Дальше указываем все начертания, наличие которых нам важно. Для этого жмем «Select this style» и копируем ссылку нужного fonts (но не всю, а лишь то, что находится в кавычках, в окне <link>).
Рабочая ссылка будет такой:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
Открываем любимую Тильду — Настройки сайта — Шрифты и цвета — Расширенные настройки — Google Fonts. В разделе CSS link вставляем эту ссылку.
Внимание! В разделах «Headline Font Family Name» и «Text Font Family Name» нужно написать правильное наименование выбранных fonts (как он назван в Google Fonts).
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Добавление двух шрифтов Google Fonts
Не хватило одного? Ничего страшного. Снова выберете «Select this style» и найдите там понравившиеся начертания для 2-ух различных шрифтов. После этого на интерфейсе возникнет раздел «Selected Families».
Проделайте процедуру из второго способа — скопировать ссылку CSS, где будут отображаться все выбранные шрифты из раздела <link>.
Теперь перемещаем ссылку в окно CSS link в разделе Google Fonts. Указываем безошибочное наименование первого шрифта в окне «Headline Font Family Name», а наименование другого шрифта в окне «Text Font Family Name».
На этом все! Используйте любой удобный вариант для подключения и создавайте проекты со вкусом (и любовью). Успехов!
- Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
- Файл-инструкцию «Как сделать нейро-фотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
- Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя
- Возможность получить Доступ в Нейроклуб на целый месяц
- Как ИИ ускоряет работу и приносит деньги
- За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!
