Як вибрати шрифт для сайту? | Onepage Довідковий центр

Onepage був розроблений спільно з дизайнерами та надає вам набір ретельно підібраних шрифтів і шрифтових пар. Ці шрифти підібрані таким чином, щоб ви завжди отримували послідовний і красивий дизайн з нашими шаблонами.

З Onepage ви можете повністю вільно створювати дизайн вашого лендінгу та додавати чи комбінувати власні шрифти з великої бібліотеки шрифтів.

Таким чином, ви можете в найкоротші терміни адаптувати лендінг до фірмового стилю вашої компанії або ваших клієнтів.

📌 Примітка: шрифти редагуються окремо для кожного проєкту, щоб не вплинути на інші проєкти.

Налаштування шрифтових пар у Onepage

Крок 1: Відкрийте конструктор

Відкрийте ваш проект та почніть редагувати сторінку.

Крок 2: Open font settings

Внизу зліва натисніть на "Дизайн", а потім — "Типографія".

Тут ви можете вибрати одну з наших попередньо вибраних шрифтових пар або додати власну пару, натиснувши на кнопку "Додати шрифт".

📌 Примітка: ви також можете редагувати наші попередньо вибрані пари шрифтів. Просто виберіть пару, а потім натисніть на кнопку "Додати шрифт".

Крок 3: Налаштувати власну шрифтову пару

Виберіть шрифт заголовка і тексту.

📌 Примітка: ви можете мати до 7 шрифтів у парі. Просто натисніть на "додати шрифт".

Крок 4: Виберіть властивості шрифту

Ви можете налаштувати шрифт, змінивши наступні параметри.

Крок 5: Зберегти та оновити

Обов'язково натисніть "Зберегти" та "Оновити".

Використання шрифту в тексті

Після налаштування шрифтової пари ви можете використовувати шрифти у своїх текстах.

Просто виділіть текст і виберіть шрифт 🙂

Імпорт власного шрифту

Сторонній шрифт повинен бути розміщений на спеціальному сервісі. Ви повинні отримати посилання на шрифт і вбудувати його за допомогою спеціального коду у Onepage.

Цей спосіб призначений для досвідчених користувачів, будьте готові до нескладного кодування.

⚠️ Важливо: Використання сторонніх шрифтів регулюється законами про авторські права та ліцензії.

Ви несете відповідальність за перевірку того, чи не порушуєте ви права третіх осіб при використанні цих шрифтів, наприклад, авторські права і чи є у вас відповідні ліцензії або дозволи на використання шрифтів у ваших проектах.

Використання користувацького коду може вплинути на швидкість роботи вашого сайту. Будь ласка, використовуйте його на свій ризик.

Крок 1: Підготовка

Перш ніж почати, перейдіть до Onepage і виберіть шрифт "System", інакше користувацький код не буде працювати.

За бажанням ви можете додати до пари "system" додаткові шрифти, якими зможете користуватися. Просто натисніть на кнопку "Додати шрифт"

Крок 2: Знайдіть потрібний шрифт

Знайдіть потрібний шрифт в інтернеті.

Для прикладу наведемо кілька сервісів:

Крок 3: Отримайте URL-адресу для імпорту та назву шрифту

Тепер вам потрібно отримати URL-адресу імпорту та назву шрифту.

Ось так, наприклад, виглядає URL-адреса для імпорту з Google Fonts. Вона імпортує шрифт "Montserrat":

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

Крок 4: Підготуйте користувацький код

Ви можете імпортувати до 2 шрифтів.

Це наш користувацький код, який вам потрібно налаштувати (натисніть, щоб розгорнути)

@import url("IMPORT_URL");
@import url("IMPORT_URL2");


.con-kit-page{
 --font-kit-header-font: 'FONT_NAME_HEADER', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'FONT_NAME_TEXT', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Замініть значення IMPORT_URL на URL-адресу імпорту, яку ви вже скопіювали. Не видаляйте лапки ("").
Замініть значення IMPORT_URL2 другою URL-адресою імпорту, якщо ви хочете мати два шрифти. Не видаляйте лапки ("").

Замініть значення FONT_NAME_HEADER назвою шрифту. Цей шрифт буде використано для меню (header) та текстів заголовків.
Замініть FONT_NAME_TEXT назвою шрифту. Цей шрифт буде використано для всіх інших текстів.

Ось приклад коду, який імпортує два шрифти з Google Fonts: Amita та Laila (натисніть, щоб розгорнути)

@import url("https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap");


.con-kit-page{
 --font-kit-header-font: 'Amita', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'Laila', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Крок 5: Додайте код у Onepage

⚠️ Важливо: помилки в користувацькому коді можуть призвести до збою в роботі редактора. Будь ласка, спочатку створіть копію вашого проекту або збережіть його як шаблон. Це забезпечить вам резервну копію.

Onepage не несе відповідальності за будь-які помилки, спричинені користувацьким кодом.

Натисніть "Налаштування" ➡️ "Налаштування сайту" ➡️ "Код" і додайте код у розділі <Styles>:

Крок 6: Зберегти та оновити.

Обов'язково натисніть "Зберегти" та "Оновити".

Поширені питання та їх вирішення

Чи можна завантажити мій власний шрифт безпосередньо на Onepage?

Ні, наразі ми підтримуємо цю функцію.

Чому моя сторінка завантажується значно довше після того, як було додано мій власний шрифт?

Користувацький шрифт завантажується із зовнішнього хосту. Залежно від вашого інтернет-з'єднання з хостом, завантаження може зайняти деякий час. Тому ми рекомендуємо використовувати надійний хостинг.

Пов'язані теми

Як створювати власні шаблони і де їх редагувати?
Як дублювати проекти, сторінки так секції?

Як інтегрувати власний код у проєкт або сторінку?

💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂