Помимо богатой библиотеки уже встроенных шрифтов в Тильду можно интегрировать дополнительные. Например, от 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).
- Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
- Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
- Что ждет рынок программирования и почему мы решили сюда пойти
Добавление двух шрифтов Google Fonts
Не хватило одного? Ничего страшного. Снова выберете «Select this style» и найдите там понравившиеся начертания для 2-ух различных шрифтов. После этого на интерфейсе возникнет раздел «Selected Families».
Проделайте процедуру из второго способа — скопировать ссылку CSS, где будут отображаться все выбранные шрифты из раздела <link>.
Теперь перемещаем ссылку в окно CSS link в разделе Google Fonts. Указываем безошибочное наименование первого шрифта в окне «Headline Font Family Name», а наименование другого шрифта в окне «Text Font Family Name».
На этом все! Используйте любой удобный вариант для подключения и создавайте проекты со вкусом (и любовью). Успехов!
- Как нейросети могут изменить вашу деятельность, от фриланса до управления бизнесом.
- Как использовать GPT-агентов, цифровые двойники и другие ИИ-решения.
- Важность безопасности в эпоху нейросетей.
- Какие нейросети помогут вам и как на них зарабатывать.
- 10 способов применения ИИ для бизнеса.
- Как внедрение ИИ в бизнес-процессы помогает улучшить финансовые результаты компаний в 2025 году.
- Мы асскажем, кто такой промпт-инжинер, чем он занимается и какие результаты можно ожидать от его работы.
- Также обсудим, где найти промт-инжинера, сколько стоят его услуги в России и за рубежем, и кто может стать промпт-инженером.
