Заходим на Google Fonts.
Выбираем нужный шрифт. Я выбираю Roboto Mono ‘(ʘᴥʘ)’
Добавляем нужные гарнитуры жмякнув на кнопку [ Select this style + ]
Справа в менюшке Selected family, ниже выбранных гарнитур есть пункт Use on the web. Выбираем <link>.
Копируем вообще весь код.
Идём в Тильду. Заходим в настройки сайта → ещё → html-код для вставки внутрь head.
Вставляем код. Сохраняем.
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
Переходим на страницу в которой надо поменять шрифты. Например, у меня вот эта страничка. В которой я использую стандартные блоки + zero блоки.
Допустим, что мне для заголовков нужен шрифт Josefin Sans {проделайте 1-7 пункт шоб добавить еще один шрифт}, а для текста Roboto Mono.
Нам нужно провести исследование опубликованной страницы и найти нужные классы, через inspect (F12 в Google Chrome).
Жмякаем ctrl + shift + c. Наводим курсор на элемент и видим классы t995_title, .t-title, t-title-md:
То же делаем с другими элементами:
На примере заголовков можно увидеть, что заголовок в 1 и 2 блоке имеет одинаковый класс — .t-title.
То же можно наблюдать и для описания — .t-descr:
Это значит, что нам не нужно прописывать правила для вообще каждого элемента, а взять только общий класс.
Для элементов zero блока используются тоже один и тот же класс —
.tn-atom:
Но нам нужно прописать свой класс для каждого элемента, потому что мы не может обращаться только к классу .tn-atom, иначе у нас и заголовки и описания будут одного и того же шрифта.
[10]. Заходим в zero блок и даём каждому элементу определенный класс. Например (я буду перечислять классы, которые применимы и для стандартных блоков чаще всего):
<aside> 🐊 t-title — заголовки t-descr — описание t-text — текст t-btn — кнопки
если у вас есть какие-то другие элементы, то называйте их как хотите :)
</aside>
[10]. Никуда не заходим и не даём элементам класс ( по дефолту остаётся только .tn-atom )
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
<style>
/*прописываем классы заголовков: заголовок для станд блока, заголовок для zero*/
.t-title, .t-title .tn-atom {
font-family: ‘Josefin Sans’ !important;
}
/*прописываем классы описания: описание для станд блока, описание для zero*/
.t-descr, .t-descr .tn-atom {
font-family: ‘Roboto Mono’ !important;
}
</style>
Ну и всё. Ура!
Толщину шрифта и размер можно менять в настройках блока.
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
<aside> 💛 Пример можно посмотреть на вот этой страничке: https://sanechek.xyz/google_fonts. Обратите внимание на интерактивные кнопки внизу экрана, они помогут вам понять этот гайд лучше <3
ヽ(✿ﾟ▽ﾟ)ノ Забубоньте лайк или какашечку в конце страницы. Спасибо!
</aside>
Прибольшое мерси боку: → Кате за любопытство и умную голову! (✿◕‿◕✿) → Тимофею за энтузиазм и помощь в исследовании этого вопроса! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
<aside> 🚧 Как подключить файловый шрифт → скоро
</aside>