Як вбудувати шрифти в сайт

Ви напевно звертали увагу що на сайтах часто використовують незвичайні шрифти.

У СК також можна використовувати будь-які шрифти для написів і текстів. Але якщо у ваших відвідувачів такого шрифту немає на комп'ютері - вони побачать зовсім інше оформлення сайту, не те, яке задумували ви.

Так як же вбудувати шрифти в свій сайт? Подивимося на прикладі двох шрифтів: PT Sans і PT Serif. Нам потрібно вирішити два завдання:
1. Спочатку потрібно зробити так, щоб ви змогли в СК створювати сайт з використанням цих шрифтів.
2. А потім потрібно підключити до сайту використані вами шрифти, щоб ваші відвідувачі бачили сайт правильно.

Тепер запустіть СК, і ви побачите, що шрифти з'явилися у вас в списку доступних шрифтів (список «шрифти для кнопок»).
Ви можете оформляти свій сайт ними.

Відкрилася нова сторінка, і на ній кілька блоків. Ось перший блок:

Як вбудувати шрифти в сайт

Відзначте галочками ті шрифти, які ви використовували. Те, що ви тут бачите - називається різними «накресленнями» шрифту. Зазвичай ми що робимо наприклад в Word: вибрали шрифт, і пишемо свій текст. Коли нам треба, просто натискаємо кнопку, і робимо шрифт жирним. Або курсивним. А з точки зору художника або дизайнера, який малює шрифт - це різні накреслення, і кожне зображення він створює вручну окремо - звичайний шрифт, жирний, курсивний, жирний з курсивом.

Відзначте галочками ті накреслення, які ви використовували в сайті. Можна не думати, і відзначити всі галочки, але тоді розмір шрифту, який буде скачиваться на комп'ютери ваших відвідувачів буде великий. Вони будуть довше чекати відображення вашого сайту, і у них буде більше секунд на рішення про відхід. Ставте галочки, і побачите як рухається стрілка в правій частині сторінки.
Тому в останній раз повторю, відзначте галочками ті накреслення, які ви використовували в сайті.
Йдемо далі:

Відзначте галочками Cyrillic, щоб російські літери були в шрифті.

І останнє, нижче ви побачите рядок для вбудовування шрифтів в сайт:

Скопіюйте рядок цього коду.

Тепер ідіть в СК і поставте на сторінку Заготівлю. Натисніть «Змінити код», і вставте в код цей рядок.
Скопіюйте заготовку на інші сторінки, де ви використовували шрифти, або вставте в Стиль.
Все, сайт готовий. Опублікуйте його, і подивіться з будь-якого іншого комп'ютера, як він виглядає: чи всі шрифти в порядку.

Отже, коротко кроки:
Як підключати шрифти самому
1. Знайдіть шрифт, який вам подобається в Google Fonts.
2. За назвою шрифту знайдіть варіант шрифту для Windows і встановіть на свій комьпютер.
3. Підготуйте сайт.
4. Вбудуйте в сайт шрифти, підготувавши код підключення на Google Fonts.

Схожі статті