@font-face {
   font-family: 'Balkenschrift';
   src: url('/assets/fonts/BalkenschriftVAR.ttf') format("truetype-variations");
}

@font-face {
   font-family: "Purple Haze";
   src: url("/assets/fonts/PurpleHaze-Trial.woff2") format("woff2-variations");

   /*
    Stylesheet will contain the class "purple-haze-trial-thin-custom-instance"
    to enable a custom instance with the following values:

    "wtun" 100, "wtsp" 900
  */
}

@font-face {
   font-family: "Harber";
   src: url("/assets/fonts/HARBER.ttf") format("truetype-variations");
   font-weight: 00 20;
}

@font-face {
   font-family: "Roboto Flex";
   src: url(/assets/fonts/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf);
}
@font-face {
   font-family: "Bazaine";
   src: url("/assets/fonts/BSTBazaineVariableVF.woff2")
      format("woff2-variations");
   font-weight: 200 700;
   font-variation-settings: "ital" 0;
}

@font-face {
   font-family: "Bazaine Italic";
   src: url("/assets/fonts/BSTBazaineItalicVariableVF.woff2")
      format("woff2-variations");
   font-weight: 200 700;
   font-variation-settings: "ital" 1;
}

@font-face {
   font-family: "Fit";
   src: url("/assets/fonts/FitVariable-VF-Testing.woff2")
      format("woff2-variations");
   font-weight: 1 1000;
}

@font-face {
   font-family: "Rotor";
   src: url("/assets/fonts/rotor-Variable_overlay.woff2")
      format("woff2-variations");
   font-weight: 100 900;
}

@font-face {
   font-family: "Rotor Underlay";
   src: url("/assets/fonts/rotor-Variable_underlay.woff2")
      format("woff2-variations");
   font-weight: 100 900;
}

@font-face {
   font-family: "Mona Sans";
   src: url("/assets/fonts/MonaSansVF-Regular.woff2") format("woff2-variations");
   src: url("/assets/fonts/MonaSansVF-Regular.woff") format("woff-variations");

   font-weight: 100 1000;
}

@font-face {
   font-family: "Kyiv Serif";
   src: url("/assets/fonts/KyivTypeSerif-VarGX.ttf")
      format("truetype-variations");
   font-weight: 01 1000;
}

@font-face {
   font-family: "Kyiv Sans";
   src: url("/assets/fonts/KyivTypeSans-VarGX.ttf")
      format("truetype-variations");
   font-weight: 01 1000;
}

@font-face {
   font-family: "Kyiv Titling";
   src: url("/assets/fonts/KyivTypeTitling-VarGX.ttf")
      format("truetype-variations");
   font-weight: 01 1000;
}

@font-face {
   font-family: "Movement";
   src: url("/assets/fonts/MovementV.ttf") format("truetype-variations");
   font-weight: 100 900;
}

@font-face {
   font-family: "Ruder";
   src: url("/assets/fonts/RuderPlakatLLVarTrialWeb.woff2")
      format("woff2-variations");
}

@font-face {
   font-family: "Nickel";
   src: url("/assets/fonts/NickelGothicV3Variable[slnt\,wdth].woff2")
      format("woff2-variations");
}

@font-face {
   font-family: "WOAH Spine";
   src: url("/assets/fonts/WHOA-Spine-v0.4.1.ttf") format("truetype-variations");
}

@font-face {
   font-family: "WOAH Top";
   src: url("/assets/fonts/WHOA-Top-v0.4.1.ttf") format("truetype-variations");
}
/*
 * =======================
 * Variable Font einbinden
 * =======================
 *
 * Lesen:
 * https://web.dev/variable-fonts/
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
 *
 */

/* 
 * =================
 * Entweder ab Datei
 * =================
 */

/*
 * - Vergleiche mit ‘Introduction to variable fonts on the web’
 * - Den Namen der font-family kannst du frei wählen.
 * - Foo-Bar-VF.woff2 mit dem Dateinamen deines Fonts ersetzen.
 * - Die Werte zu font-weight und font-stretch stellst du gemäss Font-Eigenschaften ein.
 */

/* 
 @font-face {
	font-family: 'My Variable Font';
  src: url('Foo-Bar-VF.woff2') format('woff2-variations');
	font-weight: 100 1000;
	font-stretch: 25% 151%;
}

*/

/*
 * =====================================
 * Oder ab CDN (Google, Adobe, Monotype)
 * =====================================
 */

/*
 @import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap');
*/

/*
ACHTUNG! die @import-Zeile muss zuoberst im Stylesheet stehen!
*/