Как использовать 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 на вашей веб-странице.

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

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

Похожие

Как исправить инфекцию Windows с помощью Linux
Если вы используете Linux на настольных или серверных компьютерах вашей компании, вы уже знакомы со многими преимущества безопасности операционная система с открытым исходным кодом предлагает своим конкурентам Windows и Mac. Однако многие не понимают, что Linux также можно использовать для спасения компьютера, поврежденного вредоносным ПО. Вредоносное ПО - частое явление, в
Как связать ваш Android-смартфон с Windows 10
... Google Play. Следуйте инструкциям по установке Cortana и настройке уведомлений. Откройте приложение Google Play Store на своем телефоне. Поиск Кортана. Установите Microsoft Cortana. После установки откройте Cortana Нажмите кнопку с тремя меню в правом верхнем углу, затем нажмите Настройки
Установка Windows 8 с USB-носителя
... названием Windows 8.1. Настолько, что мы решили во что бы то ни стало заменить нашу старую систему на нетбуке на новую Windows 8.1. Единственная проблема заключается в том, что у нашего нетбука нет оптического привода, который мог бы читать системную плату. Или альтернативно: после переезда мы потеряли где-то наш установочный компакт-диск с Windows, но мы записали его серийный номер в поле зрения. Что делать в этой ситуации? Вы можете отдать наш нетбук IT-специалисту - мы сэкономим время,
Как я могу дважды загрузить Windows XP и Windows 7?
Настройка компьютера для двойной загрузки двух операционных систем может быть еще более неприятной. Двойная загрузка - это процесс установки двух отдельных операционных систем на один компьютер с возможностью выбора, какую из них запускать. Независимо от того, выберете ли вы запуск дважды, потому что вас не устраивает обновление, или просто потому, что вам нравятся аспекты каждой операционной системы, процесс один и тот же. Windows 7 является крупным обновлением Windows XP, но обе операционные
Для чего нужен QR-код?
Благодаря кодированию символов Кэндзи / Кана QR-код стал чрезвычайно популярным в Японии. Практически единственным ограничением использования QR-кодов является наше воображение. Недавно компания Mercedes-Benz выступила с новой идеей использования QR-кодов. Идея заключается в том, чтобы вставить в автомобиль QR-код, ссылающийся на техническую схему автомобиля. Таким образом, после сканирования QR-кода спасатели вместо поиска по карточкам скорой помощи получат подробные инструкции о том,
Блокноты для Windows
Записные книжки позволяют вам создавать столько книг, сколько вам нужно, чтобы писать, хранить и структурировать ваши данные о жизни, и они быстро станут единственным хранилищем для всех журналов, идей, заметок, черновиков и дневников, а также для ваших проектов, задач списки, документы, файлы и все остальное, что вы хотите держать под рукой.
... google/products/chrome/cleaner-safer-web-chrome-cleanup/"> Сообщение блога Понедельник. Опираясь на существующ...
... google/products/chrome/cleaner-safer-web-chrome-cleanup/"> Сообщение блога Понедельник. Опираясь на существующие параметры безопасности, такие как безопасный просмотр, новые параметры будут предупреждать пользователей об изменении расширений или когда программное обеспечение связывает нежелательный контент для загрузки, а также улучшать его способность обнаруживать угрозы. УВИДЕТЬ:
БЛИК - удобные платежи. Как это работает?
... нах, снимать наличные в банкомате и осуществлять переводы на свой телефон. Как это работает? Проверьте! Что такое сервис BLIK? BLIK - это польская система мобильных платежей, доступная в мобильных приложениях отдельных банков. Система BLIK была создана в 2015 году и очень популярна! Его создатель - Польский Стандарт Платежей - компания, созданная шестью крупными банками: Алиор Банк, Банк Заходни ВБК (в настоящее время Сантандер Банк Польска), ИНГ Банк Слёнски, МБанк,
Как удалить резервные копии Android из вашей учетной записи Google
Ваша учетная запись Google выполняет резервное копирование синхронизированных устройств с Android. Копии содержат, например, настройки и данные приложения. Как можно удалить такие копии из вашей учетной записи Google? Где именно они? Когда вы используете
Проектирование дома на Mac и ПК
Кто из вас (к сожалению, я предпочту некрасивый пол здесь) за «раннюю молодость» не играл с блоками? Я предполагаю, что большинство из них построили дома в масштабе, маленькие гаражи, она держала в них resoraki ... Теперь те, кто профессионально развивают свою творческую страсть, профессионалы - они используют дорогое специализированное программное обеспечение для поддержки процесса проектирования. Программное обеспечение САПР также позволяет визуализировать эти видения. Однако не все хотели
Как собрать мини-ITX игровой ПК Ryzen
Компьютеры не должны быть большими, чтобы быть мощными. Хотя выбор ПК небольшого форм-фактора когда-то требовал снижения скорости системы, последние технологические достижения сократили даже мощное оборудование ПК до пакетов размером с пинту. Показательный пример: 6-ядерный 12-ниточный игровой компьютер mini-ITX, который мы создаем после недавнего появления AMD Снижение

Комментарии

Как обезопасить себя от такого рода атак мы объяснили в статье Как безопасно использовать платежную карту?
YouTube является одним из самых посещаемых сайтов. Платформа для обмена видео в настоящее время привлекает более миллиарда пользователей - около трети всех пользователей Интернета, которые все вместе генерируют миллиарды просмотров. Широко узнаваемый формат YouTube и присутствие в Интернете делают его мощным активом любой маркетинговой
Как я могу увидеть список ресурсов, доступных в ARMN, прежде чем принять решение использовать его?
Как я могу увидеть список ресурсов, доступных в ARMN, прежде чем принять решение использовать его? Это важный вопрос. Многие из вас используют свои издательства RMN. Они назначены вашим урокам, и было бы нежелательно отключать их от сети для проверки нового соединения ARMN. Таким образом, нет проблем (для каждого учителя, как для тех, кто использует учебники данного издателя, так и для тех, кто рассматривает их выбор в следующем учебном году), можно найти ARMN в представлении редактора
Как вы проверяете сайт?
Как вы проверяете сайт? В теории все просто. Соответствующая ссылка должна быть в разделе « Публикации» публикации . На практике этот параметр недоступен для большинства владельцев веб-сайтов, как было объявлено в Facebook. Вы, вероятно, не видите ссылку для проверки страницы, которая должна находиться в разделе Истекающие сообщения .
9. Использование фотографий на ПК с Windows или Mac?
9. Использование фотографий на ПК с Windows или Mac? Не стесняйтесь: вы можете найти полный список полезных сочетаний клавиш , нажав Ctrl-? (или Cmd-?) из любой области веб-приложения Photos. Поиск как профессионал 10. Google Фото может узнать лица людей на ваших фотографиях, но вы сами должны воспользоваться организационным потенциалом этой функции . Коснитесь или щелкните панель поиска в приложении и найдите всплывающую строку с блестящими,
Как мне деинсталлировать Java на компьютере с ОС Windows?
Как мне деинсталлировать Java на компьютере с ОС Windows? ) Или деинсталюийте вручную (см. Ручная деинсталювання плагина ). Проверьте другие программы, которые могут блокировать
Таким образом, для телевизионных компаний встает актуальный вопрос: как победить в конкуренции и сохранить свой бренд?
Таким образом, для телевизионных компаний встает актуальный вопрос: как победить в конкуренции и сохранить свой бренд? В феврале 2016 мы запустили онлайн-сервис дистрибуции видео OVVA.tv. Идея заключалась в создании отдельной платформы, на которой будет размещаться контент «1 + 1 медиа» и партнеров группы. Проанализировав работу OVVA.tv за последний год, мы обнаружили каннибализации контента между сайтами медиагруппы и сервисом дистрибуции. Так, на платформу приходилось
Знаете ли вы, что вы можете связать свой смартфон Android с Windows 10, чтобы создать удобное взаимодействие между двумя устройствами?
Знаете ли вы, что вы можете связать свой смартфон Android с Windows 10, чтобы создать удобное взаимодействие между двумя устройствами? После настройки вы можете просматривать веб-страницы, использовать приложения, отправлять электронные письма и выполнять другие задачи на своем смартфоне, а затем легко переключаться на свой ПК и выполнять те задачи, на которых остановились. В этой статье мы объясним вам, как начать работу с этими последними функциями в Windows 10. Как
Как это будет в тестах на прослушивание, как с точки зрения воспроизведения музыки, так и с точки зрения удобства ведения разговоров?
Как это будет в тестах на прослушивание, как с точки зрения воспроизведения музыки, так и с точки зрения удобства ведения разговоров? Проверьте, прочитав эту статью. Читать абсолютно >> Обзор беспроводной колонки Prestigio PBS7 ART AS-B11 - не первый докладчик, пришедший в редакцию. Он был уже
Как использовать благородное сырье, чтобы придать вашей квартире дизайнерский шик?
Как использовать благородное сырье, чтобы придать вашей квартире дизайнерский шик? Сегодня вместе с брендом Harmonick мы узнаем, что покрыто модным плащом, шалью с пепиткой или хлопковыми вешалками для полотенец! После господства скучных и простых решений, спрятанных где-то в углу зала, модели, притягивающие взгляд, входят в интерьер! Сегодня это объекты для настоящих ценителей дизайна, ценителей искусства и любителей оригинального и неповторимого! Посмотрите сами, как вешалка может
Итак, как вы создаете рекламный слоган?
Итак, как вы создаете рекламный слоган? Узнайте о 5 правилах, которые повышают вероятность успеха при создании рекламного слогана: Идентификация. Хороший слоган должен соответствовать названию, продолжая или дополняя его сообщение. Иногда это достигается путем размещения в пароле новое название компании («Citi никогда не спит» - Ситибанк), но это не единственное решение. Образно говоря
Почему не удалось связать учетную запись на сайте с учетной записью мультимедиа сразу после того, как специалист установил декодер цифрового телевидения для цифрового телевидения?
Почему не удалось связать учетную запись на сайте с учетной записью мультимедиа сразу после того, как специалист установил декодер цифрового телевидения для цифрового телевидения? После установки службы цифрового телевидения технические специалисты передают документацию по установке в отдел обслуживания клиентов (BOK), где ее необходимо ввести в информационные системы. Пока статус BOK не изменится на «Активный», невозможно правильно связать. BOK понимает это в кратчайшие сроки и обычно

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