SSF-O – Einheitlicher Standard für Schriftarten (Local, Google Fonts)

30/12/25

2 min.

Definitionen

Der SSF-O-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Schriftarten fest.

Struktur und Semantik

Optimale Einbindung in moderne Frameworks (Next.js, Nuxt, Gatsby)

In modernen Entwicklungsumgebungen wird empfohlen, integrierte Tools zur automatischen Optimierung von Schriftarten zu verwenden.

Die Verwendung der in NextJS integrierten Lösung sorgt für die automatische Beseitigung von Layoutverschiebungen (CLS), das lokale Laden von Schriftarten sowie das Hinzufügen von display=swap.

import { Inter } from 'next/font/google';

const inter = Inter({
  weight: ['400', '500', '700'],
  subsets: ['cyrillic', 'latin'],
  variable: '--font-inter',
});

export { inter };

Anwendung im Layout:

import { inter } from './fonts';

<html lang="ru" className={inter.variable}> 
  <body>{children}</body>
</html>

Verwendung in global.css:

body {
  font-family: var(--font-inter), sans-serif; 
}

Optimale Einbindung für "reines" HTML/CSS/JS und CMS

Bei statischen Websites oder in CMS ist es wichtig, das Laden von Schriftarten selbst zu steuern, um Barrierefreiheit und eine korrekte Darstellung zu gewährleisten.

Lokale einbindung (@font-face) - die beste methode:

Aspekt	Beschreibung
Format	WOFF2 (beste Komprimierung und Unterstützung)
Speicherort	`public/fonts/` oder `assets/fonts/`
Kritisches CSS	`@font-face` muss am Anfang der Haupt-CSS-Datei stehen
Ersatzschriftart	Stellt die Beseitigung von CLS sicher

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

body {
  font-family: "Inter", sans-serif; 
}

Einbindung von Google Fonts über <link>:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Interaktivität und Visuelle Rückmeldung

CLS (Cumulative Layout Shift) wird durch das lokale Laden von Schriftarten und font-display: swap; vermieden. Dabei sollten Ersatzschriftarten nicht vergessen werden, die eine sofortige Darstellung des Textes gewährleisten, bis die Hauptschriftart vollständig geladen ist.

Suboptimale/veraltete Methoden (zu vermeiden)

Eine fehlerhafte Einbindung von Schriftarten kann die Seite verlangsamen und die Interaktion beeinträchtigen.

Methode	Beispiel	Problem
`@import` in CSS	`@import url("…");`	Blockiert das parallele Laden von Ressourcen
Andere Formate als WOFF2	`.ttf`, `.eot`, `.svg`, `.woff`	Veraltete, große Dateien
Fehlen von `font-display: swap;`	`@font-face { … }` ohne swap	FOIT – Text ist bis zum Laden der Schriftart unsichtbar