How to use Google Font Roboto

Google Font Roboto CSS code snippet.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
font-family: 'Roboto', sans-serif;

Example using HTML.

//html
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
  
//css
<style>
   body {
      font-family: 'Roboto', sans-serif;
   }
</style>

Example using CSS font-face.

@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'); 
      font-weight: 200;
      font-style: italic;
}

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.