@font-face {
    font-family: "Misto";
    src: local("Misto"), url("fonts/Misto.otf") format("truetype");
    font-style: normal;
  }
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-Light.otf") format("truetype");
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-Regular.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-Medium.otf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-SemiBold.otf") format("truetype");
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-Bold.otf") format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: "HKGroteskWide";
    src: local("HKGroteskWide"), url("fonts/HKGroteskWide-Black.otf") format("truetype");
    font-weight: 800;
    font-style: normal;
  }