@font-face

@font-face {
  font-family: "MeineSchrift";
  src:
    url("/fonts/meineschrift.woff2") format("woff2"),
    url("/fonts/meineschrift.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Verwendung */
body {
  font-family: "MeineSchrift", sans-serif;
}

<div class="face-demo">
Dieser Text verwendet die registrierte Schrift "MeineSchrift" (hier als Demo mit Arial als local-Quelle). In der Praxis würdest du eine woff2-Datei als src angeben.
</div>

/* Regular (400) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Der Browser wählt automatisch den richtigen Schnitt */
body { font-family: "Inter", sans-serif; }
h1   { font-weight: 700; } /* → inter-bold.woff2 */
p    { font-weight: 400; } /* → inter-regular.woff2 */

<div class="multi-demo">
<div class="mw-400"><div class="label">font-weight: 400 → Regular-Schnitt</div>Normaler Text in Regular</div>
<div class="mw-700"><div class="label">font-weight: 700 → Bold-Schnitt</div>Fetter Text mit echtem Bold-Schnitt</div>
</div>

/* Empfohlen: Text sofort sichtbar, Font wird getauscht */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

/* Guter Kompromiss: Minimiert Layout Shift */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: fallback;
}

/* Beste Performance: Font nur aus Cache */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: optional;
}

<div class="display-demo">
<div class="d-swap">
  <div class="name">swap: Empfohlen für die meisten Websites</div>
  <div class="desc">Text sofort mit Fallback-Schrift sichtbar. Web-Font wird bei Laden eingetauscht. Nutzer sieht kurz die Fallback-Schrift (FOUT).</div>
</div>
<div class="d-fallback">
  <div class="name">fallback: Guter Kompromiss</div>
  <div class="desc">100ms unsichtbar, dann Fallback. Web-Font wird nur eingetauscht, wenn sie innerhalb von ca. 3 Sekunden lädt. Minimiert Layout Shifts.</div>
</div>
<div class="d-optional">
  <div class="name">optional: Beste Performance</div>
  <div class="desc">Web-Font nur verwenden, wenn sie sofort verfügbar ist (z.B. aus Cache). Beim ersten Besuch wird die Fallback-Schrift verwendet. Kein Layout Shift.</div>
</div>
<div class="d-block">
  <div class="name">block: Nicht empfohlen</div>
  <div class="desc">Text bis zu 3 Sekunden unsichtbar (FOIT). Schlecht für Barrierefreiheit und Performance.</div>
</div>
</div>

/* Eine Datei für alle Gewichte */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900; /* Gewichtsbereich */
  font-style: normal;
  font-display: swap;
}

/* Jetzt können beliebige Gewichte verwendet werden */
.thin   { font-weight: 100; }
.light  { font-weight: 300; }
.custom { font-weight: 450; } /* Stufenlos! */
.bold   { font-weight: 700; }
.black  { font-weight: 900; }

<div class="var-demo">
<div class="vw-100">Variable Font: Thin <span class="num">100</span></div>
<div class="vw-300">Variable Font: Light <span class="num">300</span></div>
<div class="vw-450">Variable Font: Zwischen-Gewicht <span class="num">450</span></div>
<div class="vw-600">Variable Font: Semi Bold <span class="num">600</span></div>
<div class="vw-900">Variable Font: Black <span class="num">900</span></div>
</div>