Как добавить пользовательские шрифты в Squarespace как профессионал

Хотите добавить собственные шрифты в Squarespace?

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

Обычно это фирменный шрифт или даже сделанный вами на заказ.

Возможно, речь идет о конкретном внешнем виде, который вы хотите создать для элементов на своем веб-сайте.

Какой бы ни была причина, в Squarespace легко добавить пользовательские шрифты — просто следуйте этому процессу!

Как добавить собственный шрифт на ваш сайт Squarespace

Добавить шрифт, который вы выберете, на свой веб-сайт Squarespace довольно просто, но нужно добавить немного CSS.

Убедитесь, что вы согласны с этим, прежде чем начать, или возьмите кого-нибудь, кто согласен.

Шаг 1. Выберите свой шрифт

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

Есть множество мест, где можно найти бесплатные и платные шрифты, например Creative Market. Но проверьте лицензию, прежде чем добавлять ее на свой сайт.

Шаг 2. Подготовьте файлы веб-шрифтов

Чтобы добавить шрифт на веб-сайт, вам потребуются файлы трех форматов:

1. .ttf или .otf
2. .woff
3. .woff2

Иногда у вас может быть тип файла веб-шрифта, и если вы это сделаете, пропустите этот шаг. Вы можете использовать только это.

В противном случае подготовьте три типа файлов для добавления.

Шаг 3. Загрузите файлы шрифтов в Squarespace

Перейдите в раздел «Дизайн» > «Пользовательский CSS» > «Управление пользовательскими файлами».

Здесь вы добавите шрифты с помощью кнопки загрузки.

Повторите это для всех трех файлов или для файла веб-шрифта, если он у вас есть.

Шаг 4. Назовите свой собственный шрифт в Squarespace

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

Используйте следующий код:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Возьмите это и добавьте соответствующую информацию для вашего шрифта:

• Имя шрифта: замените его на имя вашего шрифта на основе имени файла или что-то, что вы помните.
• URL-адреса шрифтов: замените это URL-адресами шрифтов, которые вы только что загрузили. Возьмите URL-адрес из области загрузки (так же, как и для URL-адреса изображения) и добавьте его на место.

Шаг 5. Определите, где и как следует использовать пользовательский шрифт

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

Это может быть в таких местах, как ваши заголовки или шапка сайта, кнопки или даже что-то вроде блока новостной рассылки.

Как использовать ваш шрифт в общих местах

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

Вот несколько популярных примеров и как это сделать.

Как изменить шрифты заголовка сайта

Шапка сайта — это область в верхней части панели навигации.

У вас может быть много ссылок здесь, текстовый логотип и, возможно, объявление.

Шрифт всего этого можно изменить с помощью следующего фрагмента CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Не забудьте заменить YOURNAME на имя вашего шрифта.

Как изменить шрифт кнопки

Еще одно популярное место для использования пользовательских шрифтов — это кнопки вашего веб-сайта.

Есть три блока кнопок: Маленький, Средний и Большой. Вы можете изменить один или все из них с помощью следующего кода:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Не забудьте заменить YOURNAME на имя вашего шрифта.

Закрепите его на Pinterest, чтобы вернуться позже!

(Больше пользовательских советов по шрифтам и устранению неполадок после графики).

Как изменить шрифты блока новостей

Блок «Информационный бюллетень» позволяет людям подписаться на вашу рассылку. Многие люди используют для этого различные плагины.

Но если вы используете блок в Squarespace, следующий код позволит вам добавить собственный шрифт.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Не забудьте заменить YOURNAME на имя вашего шрифта.

Как изменить шрифты сообщений в блоге

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

При этом необходимо учитывать заголовок страницы, описания и заголовки сообщений на страницах статей.

Возможно, вы захотите, чтобы все они были одинаковыми.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Не забудьте заменить YOURNAME на имя вашего шрифта.

Как изменить шрифт блока кавычек

Последний пример — изменение блока кавычек на другой шрифт.

Это используется для цитат в сообщениях, а также для таких вещей, как отзывы клиентов или обзоры.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Не забудьте заменить YOURNAME на имя вашего шрифта.

Вам также может понравиться мое руководство по размеру изображения Squarespace.

Проблемы с пользовательским шрифтом

Добавление шрифтов — это простая работа, если вы немного разбираетесь в CSS. Но есть несколько распространенных ошибок, о которых сообщается.

Сообщение «Неподдерживаемые шрифты» в стилях сайта

Иногда на вашем сайте может появляться сообщение «неподдерживаемый шрифт». Это происходит, когда используется шрифт Adobe, а затем Adobe удаляет его.

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

Мой шрифт выглядит иначе, когда я вхожу в систему

Иногда люди замечают, что их шрифты выглядят по-разному при входе в систему и при просмотре живого сайта. Обычно это происходит из-за читателей шрифтов и того, как они просматривают сайт.

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

Я не могу установить свой шрифт на определенный размер

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

Итак, обратитесь в службу поддержки, чтобы получить помощь в том, что может быть не так.

Добавьте свои собственные шрифты в Squarespace

С помощью CSS вы можете быстро добавлять файлы пользовательских шрифтов в Squarespace.

Вы можете использовать их в разных местах с небольшим количеством кода и настроить все, от размера до межбуквенного интервала.

Редактор стилей упростил настройку вашего веб-сайта за пределами встроенных параметров шрифта.

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