Як змінити шрифт у Squarespace 7.1 (Site Styles + CSS)

Змініть шрифти в Squarespace 7.1 через Site Styles, завантажте власний файл шрифту або застосуйте CSS до одного елемента. Кроки, таблиця вибору та розв'язання проблем.

Поширені запитання

Як змінити шрифт на всьому сайті Squarespace?

На сайті версії 7.1 відкрийте Site Styles, натисніть Fonts (Шрифти) і виберіть рекомендований набір шрифтів або відкрийте All Font Packs (Усі набори шрифтів) та відфільтруйте їх за типом: без засічок, із засічками або змішані. Набір шрифтів одразу задає шрифти для заголовків, абзаців, кнопок і додаткового тексту.

Чи можна використовувати будь-який шрифт Google у Squarespace?

Шрифти Google можна шукати за назвою у випадному списку шрифтів, але, за даними довідкового центру Squarespace, не кожен шрифт Google є в його бібліотеці. Якщо потрібного шрифту немає, ви можете завантажити файл шрифту самостійно, якщо ліцензія це дозволяє.

Які типи файлів шрифтів можна завантажити в Squarespace?

Завантажувач шрифтів у Site Styles приймає файли OTF, TTF, WOFF і WOFF2. Окрема область Custom Files (Власні файли), яку використовують разом із редактором CSS, підтримує TTF, OTF і WOFF, тож для файлу WOFF2 скористайтеся завантажувачем у Site Styles, а не областю файлів CSS.

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

Так. Довідковий центр Squarespace зазначає, що для використання шрифту на сайті потрібен дозвіл його власника або правовласника. Перш ніж завантажувати шрифт, перевірте, чи ліцензія дозволяє його використання у вебі.

Чому кроки зі шрифтами на моєму сайті відрізняються?

Сайти версій 7.0 і 7.1 мають різні налаштування шрифтів. Кроки в цьому посібнику стосуються версії 7.1. На 7.0 шрифти змінюються через Site Styles на панелі Design. Squarespace також зазначає, що власні шрифти Adobe, налаштовані на 7.0, на 7.1 не підтримуються, тож доведеться вибрати вбудований шрифт 7.1.

Чи переноситься власний CSS, якщо змінити шаблон?

На сайті версії 7.0, за словами Squarespace, власний CSS не переноситься під час зміни шаблону. Зберігайте копію будь-якого доданого CSS, щоб за потреби вставити його знову.

Коротко: на сайті Squarespace 7.1 відкрийте Site Styles, натисніть Fonts і або виберіть набір шрифтів, або налаштуйте окремо Headings (Заголовки), Paragraphs (Абзаци), Buttons (Кнопки) та Miscellaneous (Інше). Щоб використати шрифт, якого немає в бібліотеці, завантажте власний файл у тій самій панелі. Власний CSS потрібен лише тоді, коли треба змінити один конкретний елемент.

Цей посібник описує кроки для версії 7.1 за матеріалами довідкового центру Squarespace (перевірено в листопаді 2026 року). Якщо ваш сайт на версії 7.0, назви панелей відрізняються; див. примітку про версії ближче до кінця.

Який спосіб вибрати?

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

Що вам потрібно	Найкращий спосіб	Складність
Повністю новий вигляд одним кліком	Набір шрифтів у Site Styles	Низька
Різні шрифти для заголовків і основного тексту	Шрифти для кожної категорії в Site Styles	Низька
Конкретний шрифт Google	Пошук у випадному списку шрифтів	Низька
Фірмовий шрифт, на який у вас є ліцензія	Завантаження файлу шрифту	Середня
Лише один заголовок, одна кнопка або один розділ	Власний CSS	Середня або висока

Спосіб 1: змініть шрифти за допомогою набору шрифтів

Набір шрифтів одразу задає узгоджені шрифти для всіх категорій тексту, тож це найшвидший спосіб оновити вигляд сайту.

Відкрийте редактор і натисніть Site Styles (значок пензля).
Натисніть Fonts.
Виберіть один із рекомендованих наборів або натисніть All Font Packs і відфільтруйте їх за типом: без засічок, із засічками або змішані.
Перш ніж закрити панель, прокрутіть сторінки й перевірте заголовки, основний текст і кнопки.

Набори — гарний початок, але може вийти так, що шрифт заголовків вам подобається, а шрифт основного тексту ні. Саме це вирішує наступний спосіб.

Спосіб 2: змініть шрифт для однієї категорії тексту

У розділі Fonts Squarespace ділить текст на чотири групи. Кожну можна налаштувати окремо:

Headings: заголовки сторінок і стилі заголовків у текстових блоках.
Paragraphs: основний текст.
Buttons: підписи на кнопках.
Miscellaneous: дрібніший текст, як-от підписи до зображень і назви полів форм (точний склад цієї групи залежить від шаблону, тож після змін перевірте кілька сторінок).

Щоб змінити одну з них:

У Site Styles > Fonts натисніть потрібну категорію, наприклад Headings.
Відкрийте випадний список шрифтів і знайдіть шрифт за назвою.
Виберіть шрифт, а потім за потреби відкоригуйте стиль, насиченість і розмір.
Для шрифтів Adobe скористайтеся посиланням Additional Fonts (Додаткові шрифти) внизу списку.

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

Практична порада: змінюйте заголовки й абзаци окремо. Якщо змінити обидва одночасно і щось виглядатиме не так, ви не зрозумієте, що саме зіпсувало вигляд. Щоб підібрати вдале поєднання, прочитайте наш посібник як вибрати шрифти для сайту.

Спосіб 3: завантажте власний шрифт

Якщо у вашому бренді використовується шрифт, якого немає в бібліотеці, завантажте його. Squarespace наголошує, що для такого використання шрифту потрібен дозвіл його власника або правовласника.

Отримайте файл шрифту у форматі OTF, TTF, WOFF або WOFF2. Завантажувач у Site Styles приймає всі чотири.
Відкрийте Site Styles > Fonts, виберіть категорію (або випадний список шрифтів) і знайдіть опцію завантаження.
Перетягніть файл у панель завантажених шрифтів або натисніть значок «плюс» і виберіть файл на комп'ютері.
Виберіть завантажений шрифт для потрібної категорії.
Опублікуйте сайт, а потім перегляньте його на комп'ютері й телефоні, щоб переконатися, що шрифт завантажується.

Формулювання в інтерфейсі час від часу змінюються, тож якщо кнопка називається інакше, шукайте значок завантаження або «плюс» у випадному списку шрифтів.

Типові проблеми із завантаженням

Шрифт є в списку, але виглядає неправильно. У файлі може бракувати насиченості чи стилю (напівжирний, курсив). Завантажте кожну насиченість, яку плануєте використовувати, окремим файлом.
Шрифт працює в редакторі, але не для відвідувачів. Примусово оновіть опубліковану сторінку (hard refresh) і перевірте, чи ліцензія на шрифт дозволяє використання у вебі.
Ви завантажили файл WOFF2 і спробували підключити його з області файлів CSS. Область Custom Files у редакторі CSS підтримує як типи шрифтів TTF, OTF і WOFF, але не WOFF2. Для WOFF2 скористайтеся завантажувачем у Site Styles.

Спосіб 4: застосуйте власний CSS до одного елемента

Site Styles змінює шрифти для всього сайту за категоріями. Коли потрібен виняток, наприклад один заголовок іншим шрифтом, це можна зробити за допомогою власного CSS. Рекомендації Squarespace щодо CSS радять обмежуватися шрифтами, кольорами та фонами, оскільки інші зміни можуть порушити макет.

Спочатку завантажте шрифт способом 3 або виберіть шрифт із бібліотеки, щоб він уже був доступний на вашому сайті.
Відкрийте Website > Pages > Custom CSS (точний шлях на різних сайтах може трохи відрізнятися).
Вставте правило на кшталт наведеного нижче й збережіть.

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

Замініть "Your Font Name" на точну назву, яка відображається в Site Styles. Універсальний запасний варіант (serif або sans-serif) зберігає текст читабельним, якщо шрифт не завантажиться. Назви класів можуть відрізнятися залежно від шаблону й оновлень Squarespace, тож скористайтеся інспектором у браузері, щоб підтвердити селектор потрібного елемента.

Якщо ви застосовуєте CSS лише до однієї сторінки, у довідковому центрі Squarespace описано варіанти для окремих сторінок; перш ніж на них покладатися, перевірте актуальні кроки там.

Короткий чекліст перед публікацією

Скопіюйте цей список і пройдіться по ньому один раз.

[ ] Заголовки й основний текст використовують не більше двох сімейств шрифтів.
[ ] Основний текст легко читається на телефоні, а не лише на комп'ютері.
[ ] Усі використані насиченості (звичайна, напівжирна, курсив) є у шрифті.
[ ] У вас є ліцензія на використання завантаженого шрифту у вебі.
[ ] Кнопки й підписи у формах мають шрифт, що пасує до решти сторінки.
[ ] Ви зберегли копію доданого власного CSS.
[ ] Ви перевірили опублікований сайт, а не лише попередній перегляд у редакторі.

Версії 7.0 і 7.1

У довідковому центрі Squarespace сказано, що параметри шрифтів 7.1 стосуються сайтів 7.1, а сайти 7.0 мають власні налаштування шрифтів. На 7.0 шрифти змінюються через Site Styles на панелі Design. Якщо ви думаєте про перехід, у Squarespace є інструмент оновлення, а наш огляд Squarespace розповідає, як нинішній редактор виглядає в порівнянні. Якщо шрифти — лише одна з кількох речей, що вас дратують, на сторінці альтернатив Squarespace зібрано інші конструктори, а наш розбір вартості показує, у скільки загалом обходиться сайт на Squarespace.

Якщо ви починаєте новий сайт

Коли ви вибираєте шаблон або будуєте сайт з нуля, спершу визначтеся з типографікою. Це простіше, ніж виправляти її потім. Безкоштовний тариф We.Inc дозволяє опублікувати до трьох сайтів із готових шаблонів; AI-конструктор, який створює чернетку сайту за запитом, доступний на тарифі Starter за $20 на місяць. Ви можете зареєструватися тут.

Почати безкоштовно · Банківська картка не потрібна