/* thin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(thin.woff2) format('woff2'), url(thin.woff) format("woff");
}

/* light */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(light.woff2) format('woff2'), url(light.woff) format("woff");
}

/* regular */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(regular.woff2) format('woff2'), url(regular.woff) format("woff");
}

/* medium */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(medium.woff2) format('woff2'), url(medium.woff) format("woff");
}

/* bold */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(bold.woff2) format('woff2'), url(bold.woff) format("woff");
}

/* black */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url(black.woff2) format('woff2'), url(black.woff) format("woff");
}



/* thin-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(thin-italic.woff2) format('woff2'), url(thin-italic.woff) format("woff");
}

/* light-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(light-italic.woff2) format('woff2'), url(light-italic.woff) format("woff");
}

/* regular-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(regular-italic.woff2) format('woff2'), url(regular-italic.woff) format("woff");
}

/* medium-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(medium-italic.woff2) format('woff2'), url(medium-italic.woff) format("woff");
}

/* bold-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(bold-italic.woff2) format('woff2'), url(bold-italic.woff) format("woff");
}

/* black-italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(black-italic.woff2) format('woff2'), url(black-italic.woff) format("woff");
}