Fertige Einbindung mit @font-face. Diese Seite lädt die Schrift selbst über die unten gezeigten Zeilen — was du siehst, ist die echte Webfont.
Auffällige, fließende Schriftzüge
@font-face {
font-family: "Goetheanum";
src: url("https://phtok.github.io/goeloggen/assets/fonts/goetheanum/Webfonts/woff2/Goetheanum-Variabel-v2.5.woff2") format("woff2"),
url("https://phtok.github.io/goeloggen/assets/fonts/goetheanum/Webfonts/woff/Goetheanum-Variabel-v2.5.woff") format("woff");
font-weight: 190 725; /* variable Gewichtsachse */
font-style: normal;
font-display: swap;
}
/* Verwendung */
body { font-family: "Goetheanum", system-ui, sans-serif; }
.leise { font-weight: 265; }
.klar { font-weight: 440; } /* Standard */
.laut { font-weight: 680; }
.frei { font-variation-settings: "wght" 520; } /* stufenlos */
Schnitte: Flüstern 190 · Leise 265 · Klar 440 · Laut 680 · Schreien 725. Dazwischen alles stufenlos über font-variation-settings:"wght" ….
@font-face{font-family:"Goetheanum Klar";
src:url("https://phtok.github.io/goeloggen/assets/fonts/goetheanum/Webfonts/woff2/Goetheanum-Schrift-v2.5-Klar.woff2") format("woff2");
font-weight:400;font-display:swap}
/* ebenso: …-Leise.woff2 als "Goetheanum Leise", …-Laut.woff2 als "Goetheanum Laut" */
Nutzung: font-family:"Goetheanum Klar". Verfügbar: Leise · Klar · Deutlich · Laut.
Hosting: Diese URLs liegen auf GitHub Pages (mit access-control-allow-origin: *, lädt also cross-origin). Für volle Produktionskontrolle die Dateien aus assets/fonts/goetheanum/Webfonts/ selbst hosten und die URLs umbiegen — der Code bleibt gleich.