/*Light*/
@font-face{
    font-family: "Pero";
    src: url("pero-light.eot");
    src: url("pero-light.eot?#iefix")format("embedded-opentype"),
        url("pero-light.woff")format("woff"),
        url("pero-light.woff2")format("woff2"),
        url("pero-light.ttf")format("truetype"),
        url("pero-light.svg#Pero W01 Light")format("svg");
    font-weight:200;
    font-style:normal;
    font-display:swap;
}

/*Regular*/
@font-face{
  font-family: "Pero";
  src: url("pero-regular.eot");
  src: url("pero-regular.eot?#iefix")format("embedded-opentype"),
      url("pero-regular.woff")format("woff"),
      url("pero-regular.woff2")format("woff2"),
      url("pero-regular.ttf")format("truetype"),
      url("pero-regular.svg#Pero W01 Regular")format("svg");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/*Semi bold*/
@font-face{
  font-family: "Pero";
  src: url("semi-bold.eot");
  src: url("semi-bold.eot?#iefix")format("embedded-opentype"),
      url("semi-bold.woff")format("woff"),
      url("semi-bold.woff2")format("woff2"),
      url("semi-bold.ttf")format("truetype"),
      url("semi-bold.svg#Pero W01 SemiBold")format("svg");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/*Bold*/
@font-face{
  font-family: "Pero";
  src: url("pero-bold.eot");
  src: url("pero-bold.eot?#iefix")format("embedded-opentype"),
      url("pero-bold.woff")format("woff"),
      url("pero-bold.woff2")format("woff2"),
      url("pero-bold.ttf")format("truetype"),
      url("pero-bold.svg#Pero W01 Bold")format("svg");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}