Как изменить шрифт в Squarespace 7.1 (Site Styles и CSS)

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

Частые вопросы

Как изменить шрифт на всём сайте Squarespace?

На сайте версии 7.1 откройте Site Styles, нажмите Fonts и выберите рекомендуемый набор шрифтов либо откройте All Font Packs и отфильтруйте наборы по типу: без засечек, с засечками или смешанные. Набор шрифтов за один шаг задаёт шрифты для заголовков, абзацев, кнопок и прочего текста.

Можно ли использовать в Squarespace любой шрифт из Google Fonts?

Шрифты Google Fonts можно искать по названию в выпадающем списке шрифтов, но, как сказано в справочном центре Squarespace, не все они есть в его библиотеке. Если нужного шрифта нет, можно загрузить файл шрифта самостоятельно, если это позволяет лицензия.

Какие форматы файлов шрифтов можно загрузить в 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 Fonts	Поиск в выпадающем списке шрифтов	Низкая
Фирменный шрифт, на который у вас есть лицензия	Загрузка файла шрифта	Средняя
Один заголовок, одна кнопка или один раздел	Пользовательский CSS	От средней до высокой

Способ 1. Смена шрифтов через набор шрифтов

Набор шрифтов сразу задаёт согласованные шрифты для всех категорий текста, поэтому это самый быстрый способ обновить внешний вид сайта.

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

Наборы — хорошее начало, но иногда в итоге нравится шрифт заголовков и не нравится шрифт основного текста. Это исправляет следующий способ.

Способ 2. Смена шрифта для одной категории текста

В разделе Fonts Squarespace делит текст на четыре группы. Каждую можно настроить отдельно:

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

Чтобы изменить одну из групп:

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

Squarespace также позволяет задать базовый размер, от которого масштабируется остальной текст. Если после замены шрифта всё выглядит слишком крупным или мелким, сначала поправьте его, а уже потом меняйте размер отдельных блоков.

Практический совет: меняйте заголовки и абзацы за два отдельных прохода. Если изменить всё сразу и что-то будет выглядеть не так, вы не поймёте, что именно стало причиной. Как подобрать сочетание шрифтов, читайте в нашем руководстве как выбрать шрифты для сайта.

Способ 3. Загрузка собственного шрифта

Если в вашем бренде используется шрифт, которого нет в библиотеке, загрузите его. По словам Squarespace, для этого нужно разрешение владельца или правообладателя шрифта.

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

Формулировки в интерфейсе время от времени меняются, поэтому, если кнопка называется иначе, ищите значок загрузки или «плюс» в выпадающем списке шрифтов.

Частые проблемы при загрузке

Шрифт есть в списке, но выглядит неправильно. Возможно, в файле нет нужной насыщенности или начертания (полужирного, курсивного). Загружайте каждое начертание, которое планируете использовать, отдельным файлом.
В редакторе шрифт работает, а у посетителей нет. Обновите опубликованную страницу с очисткой кеша и проверьте, разрешает ли лицензия шрифта использование в вебе.
Вы загрузили файл 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 можно опубликовать до трёх сайтов из готовых шаблонов; ИИ-конструктор, который создаёт черновик сайта по запросу, доступен с тарифа Starter за $20 в месяц. Зарегистрироваться можно здесь.

Начать бесплатно · Банковская карта не нужна