Google шрифт: Google Fonts / Настройка шрифтов для проекта

Содержание

Google представила новый шрифт Roboto Flex регулируемый по 12 параметрам — Google News

Наиль Садыков

Май 8, 2022 — 11:51 Обновлено: Май 8, 2022 — 12:32

0 200

Оригинальный шрифт Roboto был запущен в далеком 2011 году. С тех пор он продолжал расширятся до нескольких вариантов, а в феврале получил оптимизированную для чтения версию Serif. Теперь, компания представила новую вариацию Roboto Flex как «крупное обновление» и «самый большой проект Google Fonts на сегодняшний день».

Roboto уже долгое время используется по умолчанию на Android и является самым популярным шрифтом Google Fonts. За последние 11 лет он оброс несколькими вариантами: Roboto Sans, Condensed, Slab, Mono и Serif.

Roboto Flex — это переменный шрифт, который включает в себя довольно гибкую кастомизацию:

«Compress» означает способность к сжатию файлов, а «express» и «finesse» — предоставление людям более широкой палитры («express») и большего контроля над дизайном («finesse»). Преимущества «express» и «finesse» возможны благодаря «осям» переменного шрифта, которые дают людям возможность выбирать и комбинировать любые значения, вместо того, чтобы ограничиваться ограниченными вариантами, определенными дизайнерами шрифта.

Демонстрация пяти осей кастомизации Roboto Flex: (1) Насыщенность
(2) Ширина (3) Оптический размер (4) Уклон (5) Наклон

Различия между оригинальным sans Roboto и Roboto Flex в размере по умолчанию (14) весьма незначительны:

Стандарты качества, принятые в Font Bureau, проявились в нескольких тонких обновлениях неогротескного дизайна Roboto sans, включая изменение стиля цифр по умолчанию с табличного начертания на пропорциональное; нули в символе процента не отклоняются от обычного дизайна нуля.

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

Roboto Flex также предлагает «огромный выбор насыщенности и ширины по всему диапазону оптических размеров», а пользовательская настройка осей охватывает насыщенность, ширину, наклон, начертание и оптические размеры, причем курсив обрабатывается «эквивалентной осью Slant».

Примеры огромного ассортимента насыщенности и ширин Roboto Flex в размере 144

Наконец, Roboto Flex предлагает семь параметрических осей (ширина штриха, тонкий штрих, высота строчных букв, высота прописных букв, высота подъема, глубина спуска, высота фигуры):

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

Roboto Flex имеет открытый исходный код и доступен для загрузки на Google Fonts в латинском, греческом и кириллическом вариантах уже сегодня.

Данный шрифт разработан литейным заводом цифрового типа Font Bureau и несколькими дизайнерами: Дэвид Берлоу, Сантьяго Ороско, Ирен Влахоу, Илья Рудерман, Юрий Остроменцкий, Михаил Струков. Примечательно, что трое из них выходцы из России.

Подключение шрифта к сайту на Тильде

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

Давайте вместе рассмотрим всевозможные варианты работы со шрифтами внутри конструктора Тильды.

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

Ищите в левой боковой панели вам нужно найти «Шрифт и цвета»:

Переходите и нажимайте на кнопку «Расширенные настройки»:

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

О всех вариантах по-порядку.

Стандартные шрифты в Тильде

Во вкладке «Basic Fonts» вы можете выбрать отдельно шрифт для заголовков и для текста. Эти шрифты установятся на ваш сайт по-умолчанию и их можно будет поменять в любой момент на другие в настройках каждого блока.

Вам предоставляется на выбор 26 шрифта. Некоторые из них системные. Какие-то шрифты из библиотеки GoogleFonts. Есть шрифты, которые предоставляются партнером Тильды — Paratype (шрифт отключается, если платная подписка не продлится, в том числе при экспорте сайта).

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

Библиотеки шрифтов Adobe fonts и Google fonts

Adobe Fonts

Перейдите на сайт https://fonts.adobe.com/fonts и зарегестрируйтесь. Вам нужно иметь активную платную подписку Creative Cloud, чтобы иметь возможность добавлять шрифты в проект. Оплатить можно по ссылке https://www.adobe.com/creativecloud/plans. html

После оплаты вы сможете выбирать шрифт из огромнейшей библиотеки Adobe.

Этапы:

Найдите подходящий шрифт и активируйте его, а затем перейдите на его страницу.
Нажмите на «Add to Web Project», чтобы добавить шрифт в существующий или новый проект.
После добавления шрифтов в проект перейдите в настройки проекта.
Внутри вашего проекта вы можете посмотреть Project ID и название шрифта, которое нужно вставить в Тильду.
Вернитесь в Тильду, в Настройки сайта → Шрифты и цвета → Расширенные настройки → Typekit.
Укажите Project ID и пропишите шрифт для заголовка и для текста точно так, как он называется в Adobe Fonts.

Подробная инструкция по ссылке: https://help-ru.tilda.ws/fontsadobe

Google Fonts

В отличие от Adobe Fonts эти шрифты полностью бесплатны.

Переходите на сайт https://fonts.google.com/. Выберите нужный шрифт и зайдите в него. Для примера я выбрал шрифт Nunito. ЕГо я буду применять к тексту на сайте.

В окне шрифта вы увидите следующее:

Вы можете нажать на кнопку «Download Family» в правом верхнем углу. Тогда вы скачайте архив со всеми начертаниями этого шрифта. Потом вы сможете загрузить в Тильду нужные начертания. Об этом я расскажу чуть позже в этой статье.

На этой же странице вы можете стразу выбрать начертание шрифта, нажав на кнопку «Select this style», как показано на картинке выше.

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

Обратите внимание на подчеркнутую ссылку. Эту ссылку вы можете копировать и вставлять в Тильду, чтоб подключить шрифт.

Но давайте сначала рассмотрим вариант сложнее. Я хочу подключить второй шрифт. Для этого возвращаемся назад на страницу всех шрифтов и ищем подходящий. Я выбрал Jura для заголовков и проделал те же действия, как и для шрифта Nunito.

Теперь видим такую картину:

Копируйте подчеркнутую ссылку и возвращайтесь в настройки Тильды.

В поле CSS LINK нужно вставить скопированную ссылку.

Поле HEADING FONT FAMILY NAME — тут вы задаете шрифт для заголовков. Вставьте сюда точное название шрифта из Google fonts, в моем случае Jura.

Поле BODY TEXT FONT FAMILY NAME — — тут вы задаете шрифт для обычного текста. Вставьте сюда точное название шрифта из Google fonts, в моем случае Nunito.

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

Нажимаем сохранить изменения и публикуем все страницы сайта. На своем сайте у меня получились такие изменения шрифта заголовка и текста:

Загрузить свой шрифт в Тильду

Для подключения своих шрифтов вам нужно перейти во вкладку «Your Own Font» в Тильде в Настройки сайта → Шрифты и цвета → Расширенные настройки:

Если вы качали шрифты с Google Fonts, то формат их не будет поддерживаться Тильдой. Чтобы это исправить, можно воспользоваться этим онлайн-конвертором или этим конвертором и переформатировать файлы шрифта в . woff

Когда шрифт уже скачан, нажимайте на кнопку «Загрузить файлы шрифта»:

Тут вы увидите 6 возможных начертаний, которые можно загрузить 6 файлов одного шрифта: Thin (100), Light (300), Normal (400), Medium (500), Semi-Bold (600) и Bold (700).

Далее в поле «УКАЖИТЕ НАЗВАНИЕ ШРИФТА» впишите точное название вашего шрифта. Ниже вы можете сразу назначить этот шрифт для всех заголовков и/или текста по-умолчанию.

Нажмите кнопку «Сохранить» и потом кнопку «Вернуться к настройкам сайта».

Дальше вас вернет на страницу настроек шрифта:

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

Сохраните изменения, опубликуйте все страницы и проверяйте изменения на сайте.

[blognotice text=»Вы можете таки образом загрузить два шрифта. К примеру, в начертания THIN, LIGHIT и NORMAL можно загрузить файлы первого вашего шрифта, а в MEDIUM, SEMI-BOLD и BOLD добавить второй ваш шрифт. В настройках блоков вы сможете выбирать нужное начертания и тем самым менять шрифт.»]

Другие настройки шрифтов

Как вы могли заметить, в Настройки сайта → Шрифты и цвета → Расширенные настройки, есть еще несколько важных полей:

Здесь вы можете задать настройки по-умолчанию для всех страниц:

выбрать начертание шрифта для обычного текста;
назначить шрифт для текста;
выбрать начертание шрифта для заголовков

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

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

Google Font Pairings

Google Font Pairingsfigma

All-In-One Design Platform

DesignPrototygingDesign SystemsWards

FigJam

Столбная доска для команд

SalesboardingdeSign Meetingeam

PREADLEARLENTARTENTACT SLEGENTACT

PROCESTEDEAM

DEMPLATESCONTARTACTACT

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

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

Мероприятия и прямые трансляцииЛучшие практикиОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

Начало работы

Готовые палитры сопряжения типов шрифтов Google доступны для мгновенного и бесплатного использования в Figma.

Сочетание шрифтов Montserrat

Вдохновленный старым районом, шрифт Montserrat был создан Джульеттой Улановски в 2010 году. Он хорошо сочетается с шрифтами Source Sans Pro, Fira Sans, Karla, Hind и Inconsolata.

Получить это сочетание

Lato Font Pairing

Lato — это шрифт без засечек с открытым исходным кодом, изначально разработанный Лукашем Дзеджичем. Он поддерживает более 100 языков на основе латиницы и хорошо сочетается с Abril Fatface, Karla, Merriweather и Francois One.

Получить это сочетание

Raleway Font Pairing

Raleway — элегантный шрифт без засечек, разработанный Мэттом Макинерни в 2010 году. Он хорошо сочетается с Merriweather, Bitter, Cabin, Hind и Inconsolata.

Получить эту пару

Open Sans Pairing

Open Sans — это шрифт без засечек, разработанный Стивом Маттесоном. Он оптимизирован для печати, Интернета и мобильных устройств и хорошо сочетается с Montserrat, Bitter, Source Sans Pro, Domine и Alegreya.

Получить это сочетание

Roboto Font Pairing

Roboto — это шрифт без засечек с открытым исходным кодом, первоначально разработанный Google для Android. Это современный, четкий шрифт, который хорошо сочетается с Archivo Black, Lora, Rokkit, Nunito и Raleway.

Получить эту пару

Source Sans Pro Font Pairing

Source Sans Pro — это первый шрифт Adobe с открытым исходным кодом, разработанный Полом Д. Хантом. Он хорошо сочетается с Merriweather, Bitter, Cabin, Roboto и Open Sans.

Получить это сочетание

Nunito Font Pairing

Nunito — это шрифт без засечек, созданный Верноном Адамсом. Это закругленный терминальный шрифт без засечек для отображения, который хорошо сочетается с Alegreya, Lora, Open Sans и Roboto.

Получить эту пару

Ubuntu Font Pairing

Семейство шрифтов Ubuntu представляет собой шрифт без засечек, финансируемый Canoncial и разработанный Далтоном Маагом. Он хорошо сочетается с Rokkit, Lora, Kreon, Cabin и Source Sans Pro.

Получить это сочетание

Lora Font Pairing

Lora — хорошо сбалансированный шрифт с засечками, уходящий своими корнями в каллиграфию. Он хорошо подходит для основного текста и хорошо сочетается с Merriweather, Source Sans Pro, Roboto, Ubuntu и Open Sans.

Получить это сочетание

Josefin Sans Font Pairing

Josefin Sans — элегантный геометрический винтажный шрифт, созданный Сантьяго Ороско и предназначенный для использования в больших размерах. Он хорошо сочетается с Cardo, Abril Fatface, Yeseva One, Lato и Playfair.

Get this pairing

Twitter
YouTube
Instagram
Facebook

Use Cases

UI design
UX design
Graphic design
Wireframing
Diagramming
Brainstorming
Templates
Удаленное проектирование
Агентства
Figma для образования

Обзор

Конструктивные особенности
Функции прототипирования
Design systems features
Collaboration features
Design process
FigJam
Pricing
Enterprise
Organization
Professional
Customers
Security
Integrations
Contact

Resources

Blog
Лучшие практики
Поддержка
Разработчики
Изучение дизайна
Загрузки
Что нового
Releases
Careers
About us
Agency partners
Privacy
Status

Compare

Sketch
Adobe XD
Invision Studio
Framer
Design on Windows
Miro

Google Font Pairing Inspiration for 2022

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

Не видите пару, которая вам нравится? Предложить пару

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