Techniqued- Technoloy, Review and Tutorials
  • Android
  • Freewares
  • Tutorial
  • Windows 11
  • macOS
No Result
View All Result
Techniqued- Technoloy, Review and Tutorials
  • Android
  • Freewares
  • Tutorial
  • Windows 11
  • macOS
No Result
View All Result
Techniqued- Technoloy, Review and Tutorials
No Result
View All Result

How to Use The Google’s Roboto Font on any Website

Nirmal by Nirmal
June 28, 2012
in Tutorial
0
Share on FacebookShare on Twitter

Roboto is a sans-serif typeface family which was introduced by Google with Android Ice Cream Sandwich (4.0). The font is licensed under the Apache license and the entire font family was officially made available for free download on Android website. The family includes regular and oblique styles of Thin, Light, Regular, Medium, Bold, Black, and Condensed widths. You can use this font on Windows including applications like Word 2010, PowerPoint 2010 or other tools like Photoshop. But there is no web version of this font available so that you can use it on websites.

Now if you want to use this font on any website, you need to follow the @font-face method which we detailed on this blog previously. You can use this method to include Roboto on any website. For this, first download the @font-face kit for Roboto from Font Squirrel.

Font face kit roboto

Now upload this zip file to your server and extract it into the themes folder or any location. Next step, open the css file for your theme and add these codes.

@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'),
         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'),
         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'),
         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'),
         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'),
         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'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

Once you have done this, you can use Roboto on the website by specifying the CSS tag font-family: ‘Roboto’;

Important thing to note here is the URL value specified in the CSS, make sure that it is relative to the folder in which the fonts are uploaded to server.

Tags: Android FontFont FaceHow toRoboto FontTutorials
ShareTweetSendSend
Previous Post

Create a Photo Collage using Photos from Google Drive

Next Post

Uninstall or Update Android Apps from Google Play Web

Related Posts

Tutorial

How to Delete Drive Partition in Windows 11

September 9, 2023
Tutorial

How to Change Font Style in Gmail

September 8, 2023
Tutorial

How to Download Windows 11 Audio Drivers?

September 5, 2023
Android

How to Lock Your WhatsApp Chats with Fingerprint Authentication

August 18, 2023
Tutorial

How to Fix “This App Has Been Blocked by Your System Administrator” Error in Windows

May 18, 2023
Apple iPhone

How to Download Photos and Videos from Google Drive to iPhone

May 4, 2023

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.



Latest Articles

How to Find Hidden Apps on Android

5 Best Free VPN for Android

10 Best Online Video Makers

How to Fix the “You Need to Format the Disk in Drive Before You Can Use It” Error on Windows

How to Change the Default PDF Reader in Windows 11

How to Delete or Deactivate Threads Account

Techniqued- Technoloy, Review and Tutorials

© 2021 Techniqued - Technology, Tips, Tricks and Reviews

Navigate Site

  • About Us
  • Advertise with us
  • Contact Us
  • Copyright Policy
  • Disclaimer

Follow Us

No Result
View All Result
  • Android
  • Freewares
  • Tutorial
  • Windows 11
  • macOS

© 2021 Techniqued - Technology, Tips, Tricks and Reviews

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.