@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff'),
       url('roboto.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src:  url('robotoitalic.woff2') format('woff2'),
        url('robotoitalic.woff') format('woff'),
        url('robotoitalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url('robotobold.woff2') format('woff2'),
       url('robotobold.woff') format('woff'),
       url('robotobold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src:  url('robotobolditalic.woff2') format('woff2'),
        url('robotobolditalic.woff') format('woff'),
        url('robotobolditalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}