Как установить шрифт Google Roboto на Windows, Mac и Linux

Шрифт Roboto — это шрифт без засечек, созданный Google. Он элегантен и хорошо отображается на экранах с высоким разрешением, таких как телефоны Android. Таким образом, он идеально подходит для многих приложений. Более того, научиться устанавливать шрифт Google Roboto на Windows, macOS и Linux очень просто.

Содержание

• Загрузка шрифта Google Roboto
• Установка шрифта Google Roboto на Windows
• Установка шрифта Google Roboto на macOS
• Установка шрифта Google Roboto на Linux
• Использование шрифта Google Roboto на сайте
• Часто задаваемые вопросы

Загрузка шрифта Google Roboto

Независимо от вашей платформы, сначала вам нужно скачать пакет шрифтов Roboto. Для этого перейдите на сайт шрифта Roboto. Самый простой способ скачать всю семейство шрифтов — нажать кнопку “Скачать семью” в правом верхнем углу.

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

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

Отличная новость заключается в том, что независимо от платформы вы можете установить шрифт Roboto всего за несколько кликов.

Установка шрифта Google Roboto на Windows

Следуйте этим шагам, чтобы установить шрифт Roboto на Windows:

1. Распакуйте папку шрифта Roboto. Щелкните правой кнопкой мыши и выберите “Извлечь все”.

1. Откройте меню “Пуск” и выберите “Настройки”.

1. Нажмите “Персонализация” и выберите “Шрифты” из списка настроек справа.

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

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

Установка шрифта Google Roboto на macOS

Следуйте этим шагам, чтобы установить шрифт Roboto на Mac:

1. Извлеките ZIP-файл. Либо дважды щелкните, либо щелкните правой кнопкой мыши и выберите “Открыть”.
2. Выберите все шрифты внутри папки (пропустив LICENSE.txt), щелкните правой кнопкой мыши и выберите “Открыть с помощью -> Книга шрифтов” из контекстного меню.

1. Это загрузит их в Книгу шрифтов и сделает доступными для использования в ваших приложениях.

Обратите внимание, что вы также можете дважды щелкнуть на отдельных файлах шрифтов, чтобы загрузить их в Книгу шрифтов.

Установка шрифта Google Roboto на Linux

1. Извлеките сжатые файлы с помощью команды unzip.
2. Откройте свою домашнюю папку и включите опцию просмотра скрытых файлов/папок. Вы можете нажать Ctrl + H или щелкнуть меню “Вид” и выбрать “Показать скрытые файлы”.
3. Найдите папку “.fonts”. Если ее нет, создайте ее.
4. Переместите папку шрифта Roboto в эту папку “.fonts”.

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

1. Установите Font Manager из Центра программного обеспечения или репозитория.

1. После установки откройте это и приложение Шрифты (снова из строки поиска).

1. Внутри Font Manager убедитесь, что вы на вкладке “Управление”, и нажмите значок Плюс (+).

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

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

Хотя Linux не должен иметь никаких проблем с Roboto, некоторые дистрибутивы, такие как Ubuntu, могут испытывать трудности с распознаванием определенных шрифтов. Если у вас возникли проблемы с Roboto или другими шрифтами в Ubuntu, попробуйте конвертировать их в формат шрифта TrueType.

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

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

1. Перейдите на страницу шрифта Roboto на FontSquirrel, нажмите “Webfont Kit”, затем выберите предпочитаемые форматы шрифтов, подмножество (если есть) и нажмите “Скачать @Font-Face Kit”.

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

@font-face{  
font-family:'Roboto';  
src:url('Roboto-Regular-webfont.eot');  
src:url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Regular-webfont.woff') format('woff'),  
url('Roboto-Regular-webfont.ttf') format('truetype'),  
url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');  
font-weight:normal;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Italic-webfont.eot');  
src:url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Italic-webfont.woff') format('woff'),  
url('Roboto-Italic-webfont.ttf') format('truetype'),  
url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');  
font-weight:normal;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Bold-webfont.eot');  
src:url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Bold-webfont.woff') format('woff'),  
url('Roboto-Bold-webfont.ttf') format('truetype'),  
url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');  
font-weight:bold;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-BoldItalic-webfont.eot');  
src:url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-BoldItalic-webfont.woff') format('woff'),  
url('Roboto-BoldItalic-webfont.ttf') format('truetype'),  
url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');  
font-weight:bold;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Thin-webfont.eot');  
src:url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Thin-webfont.woff') format('woff'),  
url('Roboto-Thin-webfont.ttf') format('truetype'),  
src:url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');  
font-weight:200;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-ThinItalic-webfont.eot');  
src:url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-ThinItalic-webfont.woff') format('woff'),  
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),  
src:url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg');(under the Apache Software License).   
font-weight:200;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Light-webfont.eot');  
src:url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Light-webfont.woff') format('woff'),  
url('Roboto-Light-webfont.ttf') format('truetype'),  
src:url('Roboto-Light-webfont.svg#RobotoLight') format('svg');  
font-weight:100;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-LightItalic-webfont.eot');  
src:url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-LightItalic-webfont.woff') format('woff'),  
url('Roboto-LightItalic-webfont.ttf') format('truetype'),  
src:url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');  
font-weight:100;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Medium-webfont.eot');  
src:url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Medium-webfont.woff') format('woff'),  
url('Roboto-Medium-webfont.ttf') format('truetype'),  
src:url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');  
font-weight:300;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-MediumItalic-webfont.eot');  
src:url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-MediumItalic-webfont.woff') format('woff'),  
url('Roboto-MediumItalic-webfont.ttf') format('truetype'),  
src:url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');  
font-weight:300;  
font-style:italic;  
}

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

2. Используйте синтаксис font-family:"Roboto";, чтобы отобразить шрифт Roboto на вашей веб-странице.

Если у вас возникли проблемы с правильным отображением Roboto, у Google есть краткое руководство, которое может помочь.

Часто задаваемые вопросы

Есть ли версия Roboto с засечками?

Да. В начале 2022 года Google Fonts добавил Roboto Serif в свою библиотеку. Его можно скачать бесплатно, и вы можете установить его так же, как и Roboto. Используйте оба на своей системе, если хотите.

Должен ли я когда-либо платить за использование Roboto или других шрифтов Google?

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

Могу ли я установить другие шрифты Google одновременно?

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

Как я могу узнать, использует ли изображение или сайт Roboto?

Если вы восхищаетесь шрифтом на веб-сайте или на изображении, существует множество полезных инструментов, которые помогут вам определить шрифт. Это быстро скажет вам, использует ли изображение или сайт Roboto или другой шрифт.

Кредит изображения: Google Fonts. Все скриншоты сделаны Кристал Краудер.