@font-face {

  font-family: roboto;

  src: url(../ttf/roboto-light.ttf);

  font-weight: 300;

  font-display: swap;

}

@font-face {

  font-family: roboto;

  src: url(../ttf/roboto-regular.ttf);

  font-weight: 400;

  font-display: swap;

}

@font-face {

  font-family: roboto;

  src: url(../ttf/roboto-medium.ttf);

  font-weight: 500;

  font-display: swap;

}

@font-face {

  font-family: roboto;

  src: url(../ttf/roboto-bold.ttf);

  font-weight: 700;

  font-display: swap;

}