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

/* @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'); */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap');

@import url("https://use.typekit.net/xca3euk.css");

@import url("https://garet.typeforward.com/assets/fonts/shared/TFMixVF.woff2");

<link rel="stylesheet" href="https://use.typekit.net/xca3euk.css">


/*
 * =======================
 * 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%;
}
*/

@font-face {
	font-family: 'Recursive Sans';
	src: url(./fonts/Instrument_Sans\,Recursive/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.ttf) format('truetype');
	font-weight: 300 1000;
	font-stretch: 75% 100%;
}

@font-face {
	font-family: 'WHOA';
	src: url(./fonts/WHOA-Trial/WHOA-Spine-v0.4.1.ttf);
}

@font-face {
	font-family: 'Codec Pro';
	src: url(./fonts/Codec-Pro/Codec-Pro-Variable-trial.ttf) format('truetype');
	font-weight: 100 900;
  }

@font-face {
	font-family: 'Fraiche';
	src: url(./fonts/fraiche/fraiche.otf) format('opentype');
	font-weight: 100 900;
  }

  @font-face {
	font-family: 'Rosindale';
	src: url(./fonts/DJR-Fonts-2024-11-15-32f0f32-Testing/RoslindaleVariable[opsz\,slnt\,wdth\,wght]-Testing.woff2) format('woff2-variations');
	font-weight: 200 900;
	font-stretch: 75% 100%;
  }

  @font-face {
	font-family: 'Roboto Flex';
	src: url(./fonts/RobotoFlex-VariableFont_GRAD\,XOPQ\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf) format('woff2-variations');
	font-weight: 100 1000;
	font-stretch: 25% 151%;
	}

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

@font-face {
	font-family: 'DMT';
	src: url(./fonts/DMTLLVIPTrialWeb-Regular.woff2) format('woff2-variations');
		}
	
@font-face {
	font-family: 'Meta';
	src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
	format("woff2");
	font-style: normal;
	font-weight: normal;
	}

@font-face {
	font-family: 'Gridlite';
	src: url(./fonts/GridlitePEVFTRIAL-All.ttf)
	format("woff2");
		}

@font-face {
	font-family: 'Bandeins';
	src: url(./fonts/fonnts.com-Bandeins_Strange_Variable.ttf)
	format('truetype');
	}

@font-face {
	font-family: 'Goia Display';
	src: url(./fonts/GoiaDisplay-Regular.otf)
	format('opentype');
	}
	
	@font-face {
		font-family: 'Shrill';
		src: url(./fonts/Shrill\ Variable\ v0.3\ Trial.ttf)
		format('opentype');
		}