/*
 * =======================
 * Variable Font einbinden
 * =======================
 *
 * Zur bessern Ordnung wird der Font in einem separaten Stylesheet
 * eingebunden. Du könntest das aber auch direkt in style.css machen.
 *
 * Zum Nachschlagen:
 * https://abcdinamo.com/news/using-variable-fonts-on-the-web
 * https://web.dev/variable-fonts/
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
 *
 */

/*
 * ===================
 * Einbeinden ab Datei
 * ===================
 */

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

@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2")
    format("woff2-variations");
  font-weight: 100 1000;
  font-style: italic;
}

/*
 Anmerkungen:
 * - 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.
 * - Wenn es TTF statt WOFF2 ist, lautet das Format "truetype-variations"
 * - Bei OTF "opentype-variations"
 * - Die Werte zu font-weight und font-stretch stellst du gemäss Font-Eigenschaften ein.
 * Wichtig: "font-family" im font-face-Abschnitt «tauft» den Font, d.h. die Font-Datei
 * wird mit einem Namen assoziert. Danach kannst du den Font für bestimmte HTML-Elemente
 * aktivieren, z.B. p { font-family: 'My Variable Font'; }
*/

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