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

Содержание

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

[Интернет]

Игорь Савкин

Подписывайтесь на [Код // Дурова] в Telegram[Код // Дурова] в Telegram

Google представила новый шрифт семейства Roboto, который был разработан совместно с дизайнером компании Commercial Type Грегом Газдовичем. Этот шрифт с засечками получил название Roboto Serif.

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

Из сообщения Сары Дейли, консультанта компании по шрифтам:

Roboto Serif присоединяется к функциональному надсемейству Roboto наряду с Roboto Sans, Mono, Slab и Condensed. Но в отличие от Roboto Slab, дизайн которого был заимствован непосредственно из Roboto Sans, этот новейший шрифт с засечками привносит в коллекцию свою индивидуальность.

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

Подписывайтесь на [Код // Дурова] в Telegram[Код // Дурова] в Telegram

Вам также будет интересно

[Интернет]

Нейросеть ChatGPT умеет писать эссе и решать математические задачи. Как ей воспользоваться?

16 декабря, 2022

[Интернет]

Минцифры хочет обязать Apple разрешить установку сторонних приложений на iPhone

15 декабря, 2022

[Новости]

Минюст США может обвинить Binance в отмывании денег

12 декабря, 2022

[Новости]

В Google Chrome появился режим экономии оперативной памяти

10 декабря, 2022

[Новости]

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

7 декабря, 2022

[Новости]

Twitter станет больше полагаться на автоматизированную модерацию контента

4 декабря, 2022

[Новости]

Маск заявил, что Apple полностью возобновила размещение рекламы в Twitter

4 декабря, 2022

[Новости]

Илон Маск презентовал Twitter 2.

27 ноября, 2022

[Интернет]

В Бразилии начали изымать из магазинов iPhone без зарядных адаптеров

25 ноября, 2022

[Новости]

В аналитике данных Apple обнаружили информацию, через которую можно идентифицировать пользователей iCloud

21 ноября, 2022

Показать все

Выбор редакции

[Обзоры]

Обзор аксессуаров Яндекса: кейсы для iPhone, кабели и удобная зарядка на 20 Вт

7 декабря, 2022

[Новости]

Большое обновление Telegram 9.2: что нового?

7 декабря, 2022

[Новости]

Источник: Telegram формально исполнил решение суда в Индии, данные пользователей не передавались

30 ноября, 2022

[Обзоры]

Обзор MagSafe-пауэрбанка Anker MagGo 622 для iPhone: лучше фирменного, но не во всём

29 ноября, 2022

[Обзоры]

Обзор телевизора Sber с диагональю 55” и 4K: большой, функциональный и недорогой Smart TV

25 ноября, 2022

[Обзоры]

7 причин, почему я не перешёл на iPhone 14 Pro и какой вообще iPhone купить на 2023 год?

23 ноября, 2022

[Обзоры]

Самый дешёвый флагман со Snapdragon 8 Gen 1 в эту Чёрную пятницу

16 ноября, 2022

[Статьи]

Главные игры осени 2022

15 ноября, 2022

[Статьи]

Что заказать на AliExpress на распродаже 11.

11? Больше 10 крутых идей

10 ноября, 2022

[Обзоры]

Обзор AirPods Pro 2: улучшили всё, что просили

3 ноября, 2022

Добавить шрифт Google Fonts в WordPress

АвторЕвгений Лукин 03.02.202117.12.2022

Добавление шрифта состоит из трёх шагов:

Получить ссылки на шрифт с сайта fonts.google.com
Вставить в код сайта полученные ссылки
Присвоить шрифт тексту в стилях CSS

Существует немало плагинов, чтобы добавить шрифты Google на WordPress. Но в студии мы придерживаемся правила: «Если есть возможность не использовать плагины — не используем». Поэтому в статье рассмотрим способ добавления шрифтов без плагинов.

Шаг 1. Выбираем шрифт

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

Получаем ссылку на шрифт Google Fonts

Шаг 2. Добавляем шрифт на сайт

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

Код вставляем в functions.php дочерней темы.

Шаг 3. Присваиваем тексту новый шрифт

Используем css-свойство font-family, которое устанавливает шрифт, используемый для оформления текста.

Для примера возьмём первую строчку из песни Чиж и Ко «О любви». Обернём её в тег span с классом song-text:

<span>А не спеть ли мне песню?</span>

А классу song-text пропишем свойства:

Стили можно добавить в редакторе ‘Консоль > Внешний вид > Настроить > Дополнительные стили’

Результат:

А не спеть ли мне песню?

Метки записи: #google fonts

Евгений Лукин

Пишу о парсинге, разработке интернет-магазинов и автоматизации рутины. Канал на YouTube.
Donation

Google Font Pairings

Google Font Pairingsfigma

All-In-One Design Platform

DesignPrototygingDesign SystemsWards

Figjam

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

SalesboardingdeSign Meetingeam

PREADLEARLENTACT SLEGENTACT 9003

Meetingeam

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

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

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

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

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

Семейство шрифтов 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
Remote design
Agencies
Figma for education

Explore

Design features
Prototyping features
Design systems features
Collaboration features
Design process
FigJam
Pricing
Enterprise
Организация
Специалисты
Клиенты
Безопасность
Интеграции
Contact

Resources

Blog
Best practices
Support
Developers
Learn design
Downloads
What’s new
Releases
Careers
About us
Agency partners
Privacy
Заявление о современном рабстве
Статус

Сравнить

Sketch
Adobe XD
Invision Studio
Framer
Design для Windows
Miro

Google Font Pairing Inspiration for 2022

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

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