@font-face {
  font-family: "GuardianSans-Regular";
  src: url("../fonts/GuardianSans-Regular.svg") format("svg"), 
       url("../fonts/GuardianSans-Regular.woff") format("woff"), 
       url("../fonts/GuardianSans-Regular.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GuardianSans-Semibold";
  src: url("../fonts/GuardianSans-Semibold.svg") format("svg"), 
       url("../fonts/GuardianSans-Semibold.woff") format("woff"), 
       url("../fonts/GuardianSans-Semibold.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GuardianSans-Bold";
  src: url("../fonts/GuardianSans-Bold.svg") format("svg"), 
       url("../fonts/GuardianSans-Bold.woff") format("woff"), 
       url("../fonts/GuardianSans-Bold.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GuardianSans-Black";
  src: url("../fonts/GuardianSans-Black.svg") format("svg"), 
       url("../fonts/GuardianSans-Black.woff") format("woff"),
       url("../fonts/GuardianSans-Black.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GuardianSans-Light";
  src: url("../fonts/GuardianSans-Light.svg") format("svg"), 
       url("../fonts/GuardianSans-Light.woff") format("woff"),
       url("../fonts/GuardianSans-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GuardianSans-Hairline";
  src: url("../fonts/GuardianSans-Hairline.svg") format("svg"), 
    url("../fonts/GuardianSans-Hairline.woff") format("woff"), 
    url("../fonts/GuardianSans-Hairline.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}