Красивые русские шрифты для ворда и фотошопа

Как установить шрифт Roboto Italic на сайт

Для установки шрифта «Roboto Italic» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/roboto-italic». В файле стилей подключить шрифт, используя конструкцию CSS:

Скопировать в буфер обмена

@font-face {
	font-family: "Roboto Italic";
	src: url("../fonts/roboto-italic/roboto-italic.eot"); /* IE9 Compat Modes */
	src: url("../fonts/roboto-italic/roboto-italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/roboto-italic/roboto-italic.otf") format("opentype"), /* Open Type Font */
		url("../fonts/roboto-italic/roboto-italic.svg") format("svg"), /* Legacy iOS */
		url("../fonts/roboto-italic/roboto-italic.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/roboto-italic/roboto-italic.woff") format("woff"), /* Modern Browsers */
		url("../fonts/roboto-italic/roboto-italic.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «Roboto Italic» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "Roboto Italic";

Пример применения шрифта «Roboto Italic»:

body {
	font-family: "Roboto Italic";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

Font Master

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

Изображение: Skillbox Media

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.

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

Изображение: Skillbox Media

Больше о Figma

Как рисовать векторные изображения в Figma
Тени в интерфейсах: зачем они нужны и как их рисовать в Figma
Как создать тёмную тему в Figma
Как работать с модульной сеткой в Figma
Как работать с изображениями в Figma
Выравнивание в Figma: Auto Layout

Fontiger

Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger — он автоматически округляет дробное значение кегля до ближайшего целого:

Изображение: Skillbox Media

Как пользоваться

Скачайте плагин по ссылке.
Откройте проект в Figma и выберите любой фрейм с текстом.
Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.

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

Информация о шрифте Roboto Italic

Полное название шрифта

Roboto Italic 400

Семейство

Начертание шрифта

Italic (Курсив)

Насыщенность шрифта

400 — нормальное (Normal)

Версия шрифта

Version 1.00000; 2011

Идентификатор шрифта

Google:Roboto:2011

PostScript название шрифта

Roboto-Italic

Дизайнер шрифта

Christian Robertson

URL поставщика

http://christianrobertson.com/

Авторское право на шрифт

Font data copyright Google 2011

Поддержка символов

латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации

Регистр букв шрифта

верхний (прописные буквы) и нижний (строчные буквы)

Категории шрифта Roboto Italic

Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Наклонные шрифты Italic, Русские шрифты

Предварительный просмотр Roboto Italic

Шрифт Roboto Italic с поддержкой латиницы

Предварительный просмотр шрифта «Roboto Italic» с прописными и строчными латинскими буквами (английский алфавит A-Z и a-z).

Шрифт Roboto Italic с поддержкой кириллицы

Предварительный просмотр шрифта «Roboto Italic» с прописными и строчными русскими буквами (кириллица, русский алфавит А-Я и а-я).

Шрифт Roboto Italic с поддержкой цифр

Предварительный просмотр шрифта «Roboto Italic» с цифрами (0 1 2 3 4 5 6 7 8 9).

Шрифт Roboto Italic с поддержкой знаков препинания и пунктуации

Предварительный просмотр шрифта «Roboto Italic» со знаками препинания и пунктуации (, . / ? ; ‘ : » { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).

Скачать шрифт Roboto Italic

Шрифт Roboto Italic доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт Roboto Italic возможно только для некоммерческого использования!

Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»

Как установить шрифт Roboto Italic на сайт

Скопировать в буфер обмена

@font-face {
	font-family: "Roboto Italic";
	src: url("../fonts/roboto-italic/roboto-italic.eot"); /* IE9 Compat Modes */
	src: url("../fonts/roboto-italic/roboto-italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/roboto-italic/roboto-italic.otf") format("opentype"), /* Open Type Font */
		url("../fonts/roboto-italic/roboto-italic.svg") format("svg"), /* Legacy iOS */
		url("../fonts/roboto-italic/roboto-italic.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/roboto-italic/roboto-italic.woff") format("woff"), /* Modern Browsers */
		url("../fonts/roboto-italic/roboto-italic.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «Roboto Italic» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "Roboto Italic";

Пример применения шрифта «Roboto Italic»:

body {
	font-family: "Roboto Italic";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

Шрифты, похожие на «Roboto Italic»

AmbassadoreType Italic

Семейство: AmbassadoreType
Начертание: Italic
Насыщенность: 400
Версия: Converted from t:\AMB___MI.TF1 by ALLTYPE

Swiss 721 Italic Win95BT

Семейство: Swiss 721 Win95BT
Начертание: Italic
Насыщенность: 400
Версия: mfgpctt-v1.87 Jan 31 1997

PragmaticaWINCTT Italic

Семейство: PragmaticaWINCTT
Начертание: Italic
Насыщенность: 400
Версия: TrueType Maker version 3.00.00

Respect Italic:001.001

Семейство: Respect:001.001
Начертание: Italic
Насыщенность: 400
Версия: 001�Ȁ

monofur Italic

Семейство: Monofur Family
Начертание: Italic
Насыщенность: 400
Версия: unci 1.0 2000-04-14

Soroka

Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:

Изображение: Skillbox Media

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.
В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.
Нажмите на любую пару — откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.

Better Font Picker

В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:

Изображение: Skillbox Media

Как пользоваться

Скачайте плагин по ссылке.
Зайдите в Figma, создайте и выделите текстовый объект на макете.
Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.
Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.