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

Установка шрифта из fonts.google.com или fontlibrary.org

Как установить шрифт, которого нет в редакторе?

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

Использование других шрифтов, которых нет в редакторе, возможно с помощью специального HTML-виджета.
Шрифт берется из сервиса шрифтов Google или из fontlibrary.org, где доступно много вариантов. Загрузить свой шрифт возможно на сайт fontlibrary.org.

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

Шаг 1. Поместите в область страницы, где должен быть установлен шрифт, любой виджет. К примеру, текст. 

Шаг 2. Откройте окно импорта виджета:

Шаг 3. В поле внутри окна импорта вставьте код, скопированный из файла по ссылке. (тройной клик по тексту выделит весь код)  
Сохраните изменения.

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

Шаг 4. Выберите имеющийся шрифт на Google Fonts или fontlibrary.org, либо же загрузите файл шрифта на fontlibrary.org.

Зайдите на страницу нужного шрифта.

Убедитесь, что шрифт поддерживает кириллицу — внизу на странице можно увидеть соответствующие буквы.

fontlibrary.org:

Google Fonts:

Для Google Fonts нужно выбрать стиль шрифта по кнопке «Select this style» и перейти на вкладку «Embed» в открывшейся панели справа:

В fontlibrary.org нужный код можно найти в правом столбце, после выбора понравившегося шрифта:

fontlibrary.org:	Google Fonts:

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

Готово! Мы подключили сторонний шрифт. ✅

➢Загрузка своего шрифта на fontlibrary.org:

❗Важно: Загружая на fontlibrary.org шрифт, вы позволяете его использовать другим пользователям сервиса. Убедитесь, что ваша лицензия на шрифт позволяет это сделать.

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

1. Сначала необходимо зарегистрироваться по ссылке https://fontlibrary.org/ru/up После этого войдите в аккаунт.

2. Загрузка шрифта осуществляется на странице https://fontlibrary.org/ru/create/.

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

Категория: serif — шрифт с засечками, sans-serif — без засечек.

Шрифт в формате OTF или TTF должен быть упакован в ZIP-архив. Если у вас нет программы для архивирования, используйте онлайн-сервис. Например, https://sanstv.ru/zip.

Если шрифт корректный, то после нажатия на кнопку «CREATE» появится ссылка на загруженный шрифт, который устанавливается на страницу с помощью переноса кода(1) и названия(2) в наш HTML-виджет.

Включаем нужную опцию в настройках HTML-виджета:

1. Все виджеты «Текст». Шрифт будет у всех виджетов «Текст»

2.  Заголовки. Шрифт будет у всех виджетов «Заголовок».

3. Секции и виджеты с классом extfont. У нужных виджетов и секций указываем класс extfont, чтобы применить его для этих элементов страницы.
❗ Шрифт отобразится только на опубликованной странице.
❗ Не работает для всплывающих окон, если класс указывается у кнопки или у секции, в которой находится кнопка с окном.

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

На вкладке «Прочие» доступны дополнительные настройки:

Насыщенность. Шрифт может быть жирнее или тоньше обычного начертания.
У всех шрифтов поддерживаются значения 400 (обычный вид шрифта) и 700 (жирный шрифт). Чем больше это значение, тем «толще» шрифт.
Если выбранное значение не поддерживается, то шрифт будет с ближайшим значением (400 или 700).
Запасной шрифт. Если код или название шрифта с ошибками, то будет использован этот шрифт.

❗Важно: для корректной работы рекомендуется использовать только один такой виджет на странице.

30 лучших шрифтов Google для вашего веб-сайта

Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Для получения дополнительной информации нажмите здесь. Понял

Дизайн

14 сентября 2020 г.

Google Fonts — замечательный бесплатный ресурс. Узнайте, как это работает, и посмотрите наши 30 лучших шрифтов Google для вашего веб-сайта.

Создавайте высококачественные прототипы веб-сайтов и веб-приложений с использованием шрифтов Google. Бесплатно. Неограниченное количество проектов!

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

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

Почему шрифты так важны?

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

Шрифты помогают с брендингом

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

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

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

Шрифты жизненно важны для UX

Типографика — один из наиболее важных аспектов UX-дизайна. Выбор неправильного шрифта для копии или навигации может сделать текст неразборчивым, а сайт непригодным для использования.

Наш коллега Стивен составил список вопросов, которые вы должны задать себе при выборе лучшего шрифта для своего веб-сайта:

• Сколько весов имеет шрифт?
• Хорошая читаемость благодаря высоте x?
• Хорошо ли масштабируется этот шрифт на нескольких устройствах?
• Доступен?
• Какова его контрастность?

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

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

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

Демонстрационные шрифты, гротески и плиты – объяснение типографской терминологии

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

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

• Шрифты с засечками называются так потому, что их буквы имеют засечки, маленькие линии или штрихи, прикрепленные к концу основной части буквы. Засечки берут свое начало в римской резьбе по камню и, как полагают, связаны с тем, как слова были нарисованы на камне до того, как они были вырезаны.
  Из-за этого шрифты с засечками иногда называют «римскими». Garamond и Times New Roman — два классических шрифта с засечками.
  Типы засечек включают: старый стиль, переходный, современный и плоский.
• Шрифты без засечек , что неудивительно, являются шрифтами, в которых не используются засечки. Эти шрифты обычно кажутся более минималистичными и современными, и они основаны на вывесках и рекламных шрифтах конца 19-го и начала 20-го века. В отличие от шрифтов с засечками, шрифты без засечек иногда называют «готическими». Helvetica, пожалуй, самый известный из шрифтов без засечек.
  Типы шрифта без засечек включают гротескный, неогротескный, геометрический и гуманистический.

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

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

Преимущества использования Google Fonts на вашем веб-сайте

Google Fonts — это набор из 915 шрифтов, доступных для бесплатного использования на вашем веб-сайте. Все, что вам нужно сделать, это включить вызов шрифтов, которые вы хотите использовать в своем HTML, и все готово.

Вот несколько замечательных преимуществ использования Google Fonts на вашем веб-сайте:

• Бесплатно улучшите внешний вид вашего веб-сайта
  Google Fonts предоставляет вам доступ почти к тысяче (в основном) великолепных шрифтов бесплатно, предоставляя вам свободу выбирать между целым рядом шрифтов профессионального качества. Всего несколько лет назад эквивалентный выбор мог стоить вам тысячи долларов.
• Повышение согласованности между платформами
  Благодаря тому факту, что подавляющее большинство современных веб-браузеров поддерживают шрифты Google, включая Google Chrome, Apple Safari, Mozilla Firefox, Opera и Internet Explorer.
• Ускорьте работу своего сайта и Интернета
  Использование Google Fonts на вашем веб-сайте может сделать ваш сайт великолепным и повысить его производительность. Посмотрите это видео от Google, которое объясняет, как это сделать.

30 лучших шрифтов Google для вашего веб-сайта

1. Lato

Дизайнер из Варшавы Лукаш Дзеджич создал Lato для прозрачной работы в основном тексте, а также для индивидуального выделения при использовании в заголовках большего размера. Это семейство шрифтов без засечек одновременно знакомо и отличается — особенно в том, как закруглены некоторые детали шрифта.

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

2. Abhaya Libre

Этот шрифт Google классически элегантен с его округлыми формами и мягкими краями. Abhaya Libre создает великолепный драматичный шрифт для заголовков, сохраняя при этом отличную читабельность больших текстов. С учетом сказанного, это может быть не лучший вариант для длинных абзацев в небольших частях, которые через некоторое время могут утомлять глаза.

3. Merriweather

Merriweather Эбена Соркина разработан для оптимальной читаемости на экранах. Большая высота шрифта Merriweather по оси x повышает разборчивость шрифта, что делает его подходящим для использования в длинных текстах, а также для заголовков и заголовков. Merriweather в настоящее время имеет 8 начертаний: светлый, обычный, жирный, черный, светлый курсив, курсив, полужирный курсив, черный курсив.

4. Alegreya

Этот шрифт Google очень универсален, восходит к старым временам печатной прессы с точки зрения формы. Неудивительно, что этот шрифт обеспечивает хорошую читабельность длинных текстов в больших или малых телах. Нам нравится, что Google предлагает так много стилей для Alegreya, что делает этот шрифт многогранным — от обычных 400 до 800 черных полужирных начертаний.

Создавайте высококачественные прототипы веб-сайтов и веб-приложений с использованием шрифтов Google. Бесплатно. Неограниченное количество проектов!

5. Montserrat

Монтсеррат, основанный в рамках проекта Kickstarter в 2011 году, стремится «спасать красоту городской типографики, появившейся в первой половине двадцатого века». Это привлекательное семейство шрифтов без засечек было создано Джульеттой Улановски и названо в честь района Монтсеррат в Буэнос-Айресе, где она живет.

Рассказывая о том, что вдохновило Монтсеррат, Улановский сказал: «Чтобы рисовать буквы, я полагаюсь на примеры надписей в городском пространстве. Каждый выбранный пример производит свои собственные варианты в пропорциях длины, ширины и высоты, каждый из которых пополняет семейство Монтсеррат. Старые типографии и навесы безвозвратно при замене». Получившийся шрифт — это современная классика, актуальная версия элегантности наборов начала 20-го века.

6. Aleo

Этот шрифт с засечками создает современный интерфейс с соблюдением классических стандартов удобства использования. Созданный в тесной связи с другим шрифтом Google, который мы знаем и любим, Lato, этот шрифт также хорошо сбалансирован и современен. С полукруглыми формами и кривыми Aleo — удобный шрифт, который очень хорошо подходит для длинных текстов.

7. Muli

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

8. Arapey

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

9. Nunito

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

10. Asap Condensed

Asap Condensed поставляется с 8 стилями, включая полужирный, жирный и курсив. Это удобный шрифт Google из-за его стандартизированной ширины символов, что позволяет легко изменять стили без необходимости корректировать текст. Это хороший сжатый шрифт, который может максимально использовать заголовки и заголовки.

11. Assistant

Это еще один универсальный шрифт Google. Помощник — это чистый шрифт, предлагающий 6 начертаний, от очень светлого до полужирного. Тщательно спланированные интервалы между буквами создают шрифт с отличной читабельностью. Это, в сочетании с обилием смелых стилей, делает Assistant особенно подходящим для больших тел.

12. Open Sans

Один из самых популярных шрифтов Google. Open Sans — это открытый бесплатный шрифт без засечек, который можно использовать практически в любом сценарии. Удивительно универсальный, вы увидите, что он хорошо сочетается в качестве текстового шрифта практически со всеми другими шрифтами в этом списке благодаря простому и удобному дизайну. Open Sans был создан Стивом Маттесоном и оптимизирован для использования в печати, Интернете и на мобильных устройствах.

13. Барлоу

Барлоу был создан с целью отразить общий стиль штата Калифорния. Этот шрифт Google имеет общие черты и формы с номерными знаками штата, дорожными знаками и поездами. Помимо любопытных визуальных корней, Барлоу привносит изящные округлые формы и предлагает низкий контраст. Он также имеет хорошую читаемость, а также 9стили на выбор.

14. Oswald

Шрифт Oswald Вернона Адамса, созданный Верноном Адамсом и предназначенный для цифрового использования на компьютерах и мобильных устройствах. Используйте его для заголовков или кавычек, которые должны вставляться в пробелы с ограничениями по размеру.

15. Bitter

Bitter — популярный шрифт Google из-за его отличной читабельности для длинных текстов. Сол Матас, дизайнер, создавший этот замечательный шрифт, говорит, что источником вдохновения для создания этого шрифта послужил скромный и надежный пиксель. С тех пор Bitter превратился в универсальный инструмент со стилями от сверхлегкого 200 до 9.00 полужирный.

Создавайте высококачественные прототипы веб-сайтов и веб-приложений с использованием шрифтов Google. Бесплатно. Неограниченное количество проектов!

16.

Poppins

Poppins, созданный компанией Indian Type Foundry, представляет собой привлекательный геометрический шрифт без засечек для использования в тексте или при отображении. Это также первый шрифт в нашем списке, поддерживающий систему деванагари, которая используется более чем в 150 языках, включая хинди и санскрит.

17. Brawler

Первоначально предназначенный для газет и таблоидов, Brawler является классическим примером шрифтов, сохраняющих стиль старой школы, который до сих пор нравится публике. С его острыми краями и прочным ощущением этот шрифт Google может добавить элегантности любому дизайну. Он не имеет разных стилей, но все же это замечательный шрифт, который может оказать реальное влияние на пользователя. Лучшая часть? Brawler предлагает отличную читаемость в небольших телах.

18. Roboto

Собственный шрифт Google Roboto является самым загружаемым шрифтом на веб-сайте Google Fonts, и нетрудно понять, почему. Чистый, стильный и умный, но в то же время профессиональный и дружелюбный, Roboto является шрифтом по умолчанию для Android и Chrome OS, а также предпочтительным шрифтом в системе материального дизайна Google. Roboto прост и удобен для использования в Интернете и на мобильных устройствах.

19. Caladea

Caladea — современный и удобный шрифт Google. Caladea, созданная из Cambo, предлагает на выбор 4 разных стиля. Шрифт практичен не только в том смысле, что у него есть стили для выделения содержимого, но и благодаря его надежной читабельности. Caladea работает как с большими и драматическими заголовками, так и с небольшими текстами, которые не перегружают читателей.

20. ROKKITT

Если вы ищете что-то совершенно другое, не ищите ничего, кроме Rokkitt. Разработанный Верноном Адамсом, Rokkitt был вдохновлен так называемыми «египетскими» геометрическими шрифтами с засечками примерно в середине девятнадцатого века. Он явно предназначен больше для целей отображения, но по-прежнему хорошо работает в текстовом использовании.

21. Carme

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

22. Rubik

Rubik — это шрифт без засечек, разработанный Филиппом Хьюбертом и Себастьяном Фишером из Hubert Fischer, вариант на иврите исправлен и поддерживается Меиром Саданом. Закругленные углы рубика придают ему приятный и дружелюбный вид. Он идеально подходит для использования на дисплее или в текстовом формате.

23. Encode Sans Semi Condensed

Encode Sans Semi Condensed — это шрифт Google, который наши дизайнеры любят для больших заголовков. Шрифт имеет множество различных стилей, от Thin 100 до Black 9.00, что делает его практичным шрифтом, который всегда под рукой. Encode Sans Semi Condensed — идеальный шрифт для больших и эффектных заголовков, а также для выделения контента.

24. Enriqueta

Enriqueta — это шрифт Google, который также придает определенный шик любой странице, но он по-своему особенный. Этот шрифт имеет смелые черты, которые напомнили нашей команде о былых временах, придав странице атмосферу Роквелла. Лучшая часть? Enriqueta очень хорошо сбалансирована, и, несмотря на то, что у нее сильные визуальные эффекты, она по-прежнему обеспечивает отличную читаемость — даже в очень маленьких телах!

25. Source Sans Pro

Source Sans Pro, разработанный Полом Д. Хантом, является первым семейством шрифтов Adobe с открытым исходным кодом. Это шрифт без засечек, который действительно предназначен для использования в элементах пользовательского интерфейса, но он также хорошо подходит для длинных текстов благодаря своей ширине, которая больше, чем обычно.

26. Frank Ruhl Libre

Frank Ruhl Libre был создан с намерением быть уникальным – и он, безусловно, достигает этого. Это сжатый шрифт, который отличается от всех остальных в этом списке благодаря своим сильным, но не подавляющим визуальным эффектам и интересным пропорциям. Нам нравится уменьшенный контраст между тонкими и широкими штрихами от буквы к букве, что делает этот шрифт хорошим, но при этом обеспечивает хорошую читаемость.

Создавайте высококачественные прототипы веб-сайтов и веб-приложений с использованием шрифтов Google. Бесплатно. Неограниченное количество проектов!

27. Spectral

Spectral — это шрифт с засечками, заказанный Google для использования в веб-приложениях Docs и Slides. Элегантный, современный и красивый, Spectral чувствует себя как дома в заголовках и кавычках, а также в основном тексте. Объедините его со шрифтом без засечек, таким как Open Sans, для достижения наилучших результатов.

28. Work Sans

Разработанный Wei Huang, Work Sans основан на гротесках (вдохновении для всех шрифтов без засечек) начала двадцатого века. Его разные веса предназначены для разных целей: обычный и средний вес предназначены для использования в тексте, а более тяжелые и легкие веса оптимизированы для целей отображения.

29. Gelasio

Gelasio — замечательный шрифт Google, отличающийся универсальностью и практичностью. Шрифт поставляется с 8 стилями, от обычного 400 до полужирного 700. Наши дизайнеры любят Gelasio, потому что он обеспечивает отличную читаемость как для длинных абзацев в небольших текстах, так и для больших и ярких заголовков или выделенного контента.

30. Headland One

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

Использование шрифтов Google на вашем веб-сайте

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

Google предоставляет простое руководство по началу работы со шрифтами Google для вашего веб-сайта.

Создавайте высококачественные прототипы веб-сайтов и веб-приложений с использованием шрифтов Google. Бесплатно. Неограниченное количество проектов!

Заключение

Google Fonts — невероятно мощный и универсальный ресурс для вашего веб-сайта. Предоставляя вам доступ к более чем 900 шрифтам, Google Fonts может улучшить внешний вид вашего веб-сайта, повысить его производительность и повысить общую скорость Интернета. Более того, Google позволяет легко начать работу с Google Fonts на вашем веб-сайте.

Интегрируйте Google Fonts на свой веб-сайт прямо сейчас, и вы не останетесь равнодушными!

ПРОТОТИП · СООБЩЕНИЕ · ПОДТВЕРЖДЕНИЕ

УНИВЕРСАЛЬНЫЙ ИНСТРУМЕНТ ДЛЯ ПРОТОТИПИРОВАНИЯ ВЕБ- И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Скачать бесплатно

Ребека Коста

Штатный SEO-менеджер, энтузиаст юзабилити и покровитель всех недосыпающих дизайнеров

Связанный контент

Добавить Google Fonts | Университет Webflow

Домашний урок

Все уроки

Добавьте шрифты Google в настройки проекта и используйте их в своем проекте Webflow.

настройки сайта

 

У этого видео старый интерфейс. Скоро будет обновленная версия!

Вы можете добавить дополнительные шрифты в свой проект непосредственно из раскрывающегося списка шрифтов на панели «Стиль». Просто выберите добавить шрифты , и мы перенесем вас в настройки проекта → Настройки шрифтов . Там вы можете выбрать и добавить шрифтов Google  в свои проекты.

Использование шрифтов Google — это лишь один из трех способов импорта дополнительных шрифтов в проекты Webflow. Два других — это шрифты Adobe (Typekit) и пользовательские шрифты, доступные во всех планах.

Важно: Для интеграции Webflow с Google Font требуется использование Google Fonts API, который отправляет IP-адреса конечных пользователей на серверы Google и может не соответствовать GDPR. Узнайте больше о конфиденциальности и сборе данных Google Fonts.

‍

Чтобы предотвратить отправку IP-адресов конечных пользователей на серверы Google, мы рекомендуем загружать шрифты из Google и загружать их на вкладке > Настройки сайта > Шрифты. Узнайте больше о загрузке пользовательских шрифтов.

В этом уроке

• Просмотр шрифтов Google
  
• Добавление шрифта Google в проект
• Удаление шрифта Google 

Просмотр шрифтов Google

посетите Google fonts [↗] , чтобы ознакомиться с коллекцией бесплатных веб-шрифтов Google в реальном времени. Оказавшись на странице Google Fonts, вы можете просматривать и сортировать различные категории и проверять, как будут отображаться шрифты. Это дает вам лучшее представление о том, как будет выглядеть шрифт определенного размера и толщины, прежде чем вы добавите его в свой проект Webflow.

Добавление шрифта Google в проект

После того, как вы определились с выбором, перейдите к проекту Webflow:

1. Выберите шрифт из раскрывающегося списка под Настройки проекта → Шрифты → Шрифты Google

2. Выберите весовые варианты, языки и сценарии, которые вы хотите использовать для своего проекта.