@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Doto:wght,ROND@100..900,0..100&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap');



@font-face {
  font-family: "Flame";
  src: url("fonts/Flame-Bold.ttf") format("truetype");

  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "PurpleHaze";
  src: url("fonts/PurpleHaze-Trial.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "WhoaSpine";
  src: url("fonts/WHOA-Spine-v0.4.1.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "WhoaTop";
  src: url("fonts/WHOA-Top-v0.4.1.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Fraunces_";
  src: url("fonts/Fraunces[SOFT\,WONK\,opsz\,wght].woff2")
    format("woff2-variationse");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Frauncesitalic";
  src: url("fonts/Fraunces-Italic[SOFT\,WONK\,opsz\,wght].woff2")
    format("woff2-variationse");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Jabin";

  src: url("fonts/Jabin-Typeface.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Aisha";

  src: url("fonts/AishaLatnVFTRIAL-All.ttf") format(truetype);
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Maru-mega";

  src: url("fonts/GT-Maru-Mega-Midi-Trial.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
  font-family: "Maru-mega-mini";

  src: url("fonts/GT-Maru-Mega-Mini-Trial.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
}

@font-face {
	font-family: "Butik";
  
	src: url("fonts/ButikDisplayVFTRIAL-Ups.ttf") format(truetype);
	font-weight: 100 1000;
	font-stretch: 25% 151%;
  }

  @font-face {
	font-family: "Gridlite";
  
	src: url("fonts/GridlitePEVFTRIAL-All.ttf") format(truetype);
	font-weight: 100 1000;
	font-stretch: 25% 151%;
  }



/*
 * =======================
 * 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!
*/