Как использовать Google Roboto Font везде

  1. Скачать Google Roboto
  2. Установите Roboto Font на Windows 10
  3. Установите Roboto Font в Linux
  4. Установите Roboto Font на Mac
  5. Установите Roboto Font на свой сайт

Шрифт Roboto - это шрифт без засечек, созданный Google со времен Android 4.0 (Ice Cream Sandwich). Это элегантный шрифт, который хорошо отображается на экранах с высоким разрешением, таких как телефоны Android.

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

Если вы любите шрифт и хотите использовать его на Windows, Mac, Linux или даже на вашем сайте, то вам повезло. Разработчики Google бесплатно выпустили шрифт Roboto, и вы можете использовать его без ограничений (в соответствии с Лицензией на программное обеспечение Apache).

Вот как установить шрифт Google Roboto на всех платформах.

Скачать Google Roboto

На какой бы платформе вы ни работали, вам сначала нужно скачать пакет шрифтов Roboto.

Перейти к Roboto сайт шрифтов и загрузите шрифт (архив). Вам нужно нажать «Выбрать этот шрифт», а затем в нижней части экрана нажать на темную вкладку с надписью «1 семейство выбрано».

Вам нужно нажать «Выбрать этот шрифт», а затем в нижней части экрана нажать на темную вкладку с надписью «1 семейство выбрано»

Во вновь открытой вкладке щелкните значок «Загрузить», чтобы загрузить шрифт Roboto в виде zip-файла.

Во вновь открытой вкладке щелкните значок «Загрузить», чтобы загрузить шрифт Roboto в виде zip-файла

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

Установите Roboto Font на Windows 10

Откройте папку шрифтов Roboto. Выберите все шрифты. Щелкните правой кнопкой мыши и выберите «Установить».

Это установит шрифты на ваш компьютер с Windows. Теперь вы можете использовать шрифт Roboto в своих приложениях.

Установите Roboto Font в Linux

Откройте домашнюю папку и включите опцию для просмотра скрытых файлов / папок. Найдите папку «.fonts». Если его не существует, создайте его. Затем переместите папку шрифтов Roboto в эту папку «.fonts».

Перезапустите ваш LibreOffice, GIMP, Photoshop или любые другие приложения, которые вы используете. Вы должны увидеть шрифт Roboto, доступный для выбора.

Установите Roboto Font на Mac

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

Установите Roboto Font на свой сайт

Если вы хотите использовать шрифт Roboto на своем веб-сайте, вы можете использовать синтаксис «@ font-face» CSS3 для встраивания внешнего шрифта в вашу веб-страницу.

Идти к Страница шрифта FontSquirrel Roboto, нажмите «Webfont Kit», затем выберите предпочитаемые форматы шрифтов, подмножество (если есть) и нажмите «Download @ Font-Face Kit».

Идти к   Страница шрифта FontSquirrel Roboto,   нажмите «Webfont Kit», затем выберите предпочитаемые форматы шрифтов, подмножество (если есть) и нажмите «Download @ Font-Face Kit»

Извлеките заархивированный файл в папку шрифтов вашего сайта. Откройте таблицу веб-стилей и добавьте следующий код:

@ font-face {font-family: 'Roboto'; src: url ('Roboto-Regular-webfont.eot'); Формат src: url ('Roboto-Regular-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Regular-webfont.woff') ('woff'), url ('Roboto- Формат Regular-webfont.ttf ') (' truetype '), формат url (' Roboto-Regular-webfont.svg # RobotoRegular ') (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Italic-webfont.eot'); Формат src: url ('Roboto-Italic-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Italic-webfont.woff') ('woff'), url ('Roboto- Формат Italic-webfont.ttf ') (' trueetype '), формат url (' Roboto-Italic-webfont.svg # RobotoItalic ') (' svg '); Вес шрифта: нормальный; стиль шрифта: курсив; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Bold-webfont.eot'); формат src: url ('Roboto-Bold-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Bold-webfont.woff') ('woff'), url ('Roboto- Формат Bold-webfont.ttf ') (' trueetype '), формат url (' Roboto-Bold-webfont.svg # RobotoBold ') (' svg '); вес шрифта: полужирный; стиль шрифта: нормальный; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-BoldItalic-webfont.eot'); Формат src: url ('Roboto-BoldItalic-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-BoldItalic-webfont.woff') ('woff'), url ('Roboto- Формат BoldItalic-webfont.ttf ') (' truetype '), формат url (' Roboto-BoldItalic-webfont.svg # RobotoBoldItalic ') (' svg '); вес шрифта: полужирный; стиль шрифта: курсив; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Thin-webfont.eot'); Формат src: url ('Roboto-Thin-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Thin-webfont.woff') ('woff'), url ('Roboto- Формат Thin-webfont.ttf ') (' trueetype '), формат url (' Roboto-Thin-webfont.svg # RobotoThin ') (' svg '); вес шрифта: 200; стиль шрифта: нормальный; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-ThinItalic-webfont.eot'); Формат src: url ('Roboto-ThinItalic-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-ThinItalic-webfont.woff') ('woff'), URL ('Roboto- Формат ThinItalic-webfont.ttf ') (' truetype '), формат url (' Roboto-ThinItalic-webfont.svg # RobotoThinItalic ') (' svg '); (в соответствии с лицензией на программное обеспечение Apache). вес шрифта: 200; стиль шрифта: курсив; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Light-webfont.eot'); Формат src: url ('Roboto-Light-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Light-webfont.woff') ('woff'), url ('Roboto- Формат Light-webfont.ttf ') (' trueetype '), формат url (' Roboto-Light-webfont.svg # RobotoLight ') (' svg '); вес шрифта: 100; стиль шрифта: нормальный; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-LightItalic-webfont.eot'); Формат src: url ('Roboto-LightItalic-webfont.eot? #iefix') ('embedded-opentype')), формат url ('Roboto-LightItalic-webfont.woff') ('woff'), url ('Roboto- Формат LightItalic-webfont.ttf ') (' trueetype '), формат url (' Roboto-LightItalic-webfont.svg # RobotoLightItalic ') (' svg '); вес шрифта: 100; стиль шрифта: курсив; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Medium-webfont.eot'); Формат src: url ('Roboto-Medium-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-Medium-webfont.woff') ('woff'), url ('Roboto- Формат Medium-webfont.ttf ') (' trueetype '), формат url (' Roboto-Medium-webfont.svg # RobotoMedium ') (' svg '); вес шрифта: 300; стиль шрифта: нормальный; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-MediumItalic-webfont.eot'); Формат src: url ('Roboto-MediumItalic-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Roboto-MediumItalic-webfont.woff') ('woff'), URL ('Roboto- Формат MediumItalic-webfont.ttf ') (' truetype '), формат url (' Roboto-MediumItalic-webfont.svg # RobotoMediumItalic ') (' svg '); вес шрифта: 300; стиль шрифта: курсив; }

Убедитесь, что вы изменили «src», чтобы указать путь к папке шрифтов.

Далее вы можете использовать синтаксис

чтобы отобразить шрифт Roboto на вашей веб-странице.

Вот и все. Наслаждайтесь!

Эта статья полезна? да нет

Eot?
Eot?
Eot?
Eot?
Eot?
Eot?
Eot?
Eot?
Eot?
Eot?