Як встановити шрифт Google Roboto на Windows, Mac і Linux

Шрифт Roboto — це гарнітура без засічок, створена Google. Цей шрифт з’явився з перших днів запуску Android 4.0 (Ice Cream Sandwich) із перевагою елегантності та гарної видимості на екранах із високою роздільною здатністю, таких як телефони Android .

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

Є хороша новина для любителів шрифтів: розробники Google випустили шрифт Roboto безкоштовно, і ви можете використовувати його без обмежень (за ліцензією на програмне забезпечення Apache). Тепер ви можете використовувати його на Windows , MAC , Linux або навіть на своєму веб-сайті .

Нижче описано, як інсталювати Google Roboto Font на всіх перерахованих вище платформах операційної системи.

Завантажте Google Roboto

Незалежно від того, якою операційною системою ви користуєтеся, перше і найважливіше – завантажити набір шрифтів Google Roboto на свій пристрій.

Відвідайте сайт шрифтів Roboto та завантажте шрифт (стиснутий файл). Вам потрібно натиснути «Вибрати цей шрифт», а потім у нижній частині екрана клацнути темну вкладку з написом «Вибрано 1 сімейство».

У щойно відкритій вкладці натисніть значок «завантажити», щоб завантажити шрифт Roboto. Потім набір шрифтів буде завантажено як zip-файл.

Розпакуйте файл zip, який ви щойно завантажили, у довільну папку. Відкрийте цю папку, і ви побачите всередині всі шрифти Roboto.

Встановіть Roboto Font у Windows 10

Відкрийте папку шрифтів Roboto. Виберіть усі шрифти, клацніть правою кнопкою миші та виберіть «Встановити».

На цьому етапі шрифт буде автоматично встановлено у вашій системі через кілька хвилин. Тепер ви можете використовувати шрифт Roboto в програмах на своєму пристрої.

Встановіть Roboto Font на Linux

Відкрийте домашню папку, а потім увімкніть приховані файли/папки. Знайдіть папку «.fonts». Якщо такої немає, створіть нову папку з розширенням «.fonts». Далі перемістіть папку, яка містить шрифт Roboto, у папку «.fonts», яку ви щойно створили.

Потім перезапустіть LibreOffice, GIMP, Photoshop або іншу програму, якою ви користуєтеся. Ви побачите, що для вибору з’явиться шрифт Roboto.

Встановіть шрифт Roboto на MAC

Для MAC метод подібний до того, що в Windows. Спочатку ви витягуєте шрифт, двічі клацаєте, щоб установити, і Roboto з’явиться в книзі шрифтів. ваш. Крім того, ви також можете перетягнути їх у свою книгу шрифтів.

Встановіть шрифт Roboto для веб-сайту

Якщо ви хочете використовувати шрифт Roboto на своєму веб-сайті, ви можете використовувати синтаксис CSS3 «@font-face» . Це спосіб вставляти зовнішні шрифти на веб-сайт.

Перейдіть на сторінку шрифтів FontSquirrel Roboto , натисніть «Набір веб-шрифтів» , потім виберіть потрібні формати шрифтів і натисніть «Завантажити набір @Font-Face».

Розархівуйте завантажений файл у папку шрифтів вашого сайту. Потім відкрийте таблицю стилів на своєму веб-сайті та додайте такий код:

@font-face { font-family : 'Робот'; 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 : нормальний; font-style : нормальний; } @font-face { font-family : 'Робот'; 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 : нормальний; стиль шрифту : курсив; } @font-face { font-family : 'Робот'; 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 : жирний; font-style : нормальний; } @font-face { font-family : 'Робот'; 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 : жирний; стиль шрифту : курсив; } @font-face { font-family : 'Робот'; 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'), url('Roboto-Thin-webfont.svg#RobotoThin') format('svg'); товщина шрифту : 200; font-style : нормальний; } @font-face { font-family : 'Робот'; 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'), url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (за ліцензією на програмне забезпечення Apache). товщина шрифту : 200; стиль шрифту : курсив; } @font-face { сімейство шрифтів: 'Робот'; 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'), url('Roboto-Light-webfont.svg#RobotoLight') format('svg'); товщина шрифту : 100; font-style : нормальний; } @font-face { font-family : 'Робот'; 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'), url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg'); товщина шрифту : 100; стиль шрифту : курсив; } @font-face { font-family : 'Робот'; 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'), url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); товщина шрифту : 300; font-style : нормальний; } @font-face { font-family : 'Робот'; 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'), url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg'); товщина шрифту : 300; стиль шрифту : курсив;

Переконайтеся, що ви змінили «src» на шлях папки шрифтів.

Далі ви використовуєте такий синтаксис, щоб відобразити шрифт Roboto на своєму веб-сайті:

font-family :"Робот";

Сподіваюся, ви зможете встановити потрібні вам шрифти.

Побачити більше:

• Веб-сайт допоможе вам керувати всіма шрифтами, встановленими на вашому комп’ютері
• 5 веб-сайтів для пошуку та завантаження безкоштовних шрифтів
• Інструкції щодо завантаження величезного безкоштовного набору шрифтів із Google, що підтримує в’єтнамську мову
• 8 інструментів для «розпізнавання» шрифтів, які використовуються в додатках або на веб-сайтах