Eigene Schrift auf der Webseite verwenden (erst testen)

Um eine eigene Schrift auf deiner Webseite zu verwenden, lädst du die Schriftdatei auf deine Seite hoch, sagst deinem CSS mit einer @font-face-Regel, wo sie liegt, und nutzt sie dann mit font-family. Vorher kannst du die Schrift auf deinen echten Seiten testen: Mit der kostenlosen Erweiterung FontMee lädst du eine .woff2-, .ttf- oder .otf-Datei von deinem Computer und siehst sie mit einem Klick auf jeder Webseite, ohne etwas zu ändern und ohne etwas hochzuladen.

Was eine eigene Schrift ist

Eine eigene Schrift ist einfach eine Schriftdatei, die weder zu den Schriften gehört, die jeder Computer schon hat, noch zu den kostenlosen Schriften von Google Fonts. Das kann eine Hausschrift von einem Designer sein, eine gekaufte oder eine selbst gemachte. Meist kommt sie als Datei mit der Endung .woff2, .woff, .ttf oder .otf. Noch keine Datei? Unser Ratgeber zum Einbinden von Google Fonts deckt die kostenlosen ab.

Für Webseiten ist .woff2 die beste Wahl: Sie ist klein, die Seiten laden also schneller, und alle aktuellen Browser können sie lesen. .ttf und .otf sind die Formate für den Computer. Sie funktionieren auch im Browser, die Dateien sind aber größer. Hast du nur eine .ttf oder .otf, reicht das zum Testen völlig.

Schritt 1: Erst auf einer echten Webseite testen

Eine Schrift hochzuladen und Code zu schreiben, nur um dann festzustellen, dass sie dir nicht gefällt, kostet einen ganzen Nachmittag. FontMee ist eine kostenlose Chrome-Erweiterung, ein kleines Zusatzprogramm, das Chrome um eine neue Funktion erweitert, und lässt dich Schriften erst auf einer Live-Seite ausprobieren. Es nimmt auch deine eigenen Dateien. Das kurze Video zeigt das Panel.

1. Installiere FontMee. Füge es aus dem Chrome Web Store hinzu. Es ist kostenlos und braucht kein Konto. Klick in Chrome auf das Puzzle-Symbol und hefte es an, dann ist es immer einen Klick entfernt.
2. Öffne eine Seite deiner Webseite und klick auf das FontMee-Symbol. Das Panel öffnet sich neben der Seite. Du kannst auch Alt + Shift + F drücken. Chromes eigene Seiten (neuer Tab, der Web Store, chrome://-Seiten) lassen sich nicht ändern.
3. Drück Hochladen und wähl deine Schriftdatei. Du kannst mehrere Dateien auf einmal wählen, je bis zu 6 MB. FontMee benennt die Schrift nach der Datei, aus my_brand_sans.woff2 wird also my brand sans.
4. Finde sie unter Meine Schriften. Deine Uploads haben einen eigenen Filter und sind mit Deine markiert. Fahr mit der Maus über eine, um sie mit dem Stift umzubenennen oder mit dem Papierkorb zu löschen.
5. Klick die Schrift an, um sie auszuprobieren. Wähl unter Änderungen anwenden auf Alles, Überschriften oder Fließtext. Mit Feinjustieren stellst du Größe, Stärke und Zeilenabstand ein, und zwischen Originalschrift und FontMee-Vorschau wechselst du zum Vergleichen.
6. Tipp eigene Wörter ein. Schreib im Feld für den Beispieltext eine echte Überschrift, einen Namen oder einen Satz mit deinen Sonderzeichen, um zu sehen, wie die Schrift damit umgeht.

Deine Schriftdateien bleiben in deinem Browser, auf deinem Computer. Es wird nichts hochgeladen, und der Test ändert nur, was du siehst, also merkt sonst niemand etwas. Willst du das Ergebnis einem Kunden zeigen? FontMee kann ein Vorher-Nachher-Bild machen: so geht’s.

Schritt 2: Die Schriftdatei auf deine Webseite legen

Wenn sie dir gefällt, muss die Schrift auf deiner Seite liegen, denn die Browser deiner Besucher können nur Dateien laden, die im Internet liegen, nicht auf deinem Computer. Leg einen Ordner namens fonts an und lade die Datei dort hinein, so wie du Bilder hochlädst: über den Dateimanager deines Hostings, per FTP oder über den Schrift-Upload, den dein Website-Baukasten vielleicht anbietet. Der Ordner könnte so aussehen:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Nimm einfache, kleingeschriebene Dateinamen ohne Leerzeichen (my-brand-sans.woff2, nicht My Brand Sans (1).woff2). Das vermeidet eine klassische Ursache für „meine Schrift erscheint nicht“.

Schritt 3: Deinem CSS die Schrift bekannt machen

Jetzt schreibst du zwei kleine Dinge in dein CSS, die Regeln, die der Seite sagen, wie sie aussieht. Zuerst einen @font-face-Block, der sagt: „Es gibt eine Schrift mit diesem Namen, und ihre Datei liegt hier.“ Dann eine normale Regel, die die Schrift benutzt.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Auf Deutsch gesagt: font-family im ersten Block ist ein Name, den du dir ausdenkst. src ist der Ort der Datei, und die zweite Zeile ist ein Ersatz als .ttf für ältere Browser. font-display: swap zeigt deinen Text in einer Ersatzschrift, bis die echte da ist, damit Besucher nie auf leeren Platz starren. In den Regeln unten ist das Wort nach dem Komma (sans-serif) diese Ersatzschrift, und es ist gute Praxis, immer eine anzugeben.

Setz dieses CSS dorthin, wo deine Seite ihre Stile hält: in die style.css, in WordPress unter Design, Customizer, Zusätzliches CSS oder in das Feld für eigenes CSS deines Website-Baukastens. Liegt deine Datei in einem anderen Ordner, ändere den Pfad in url().

Die Abkürzung: FontMee schreibt es für dich

Drück in FontMee auf CSS kopieren. Für eine hochgeladene Schrift schreibt FontMee deine Regeln und fügt einen Kommentar mit einer @font-face-Zeile als Ausgangspunkt hinzu. Ändere Dateiname und Endung, falls deine anders sind, zum Beispiel auf .ttf. Lieber alles fertig? Drück ZIP zum Selbsthosten laden. Du bekommst einen Ordner mit deiner Schriftdatei in fonts, eine fonts.css mit dem @font-face-Block, eine fontmee.css mit deinen Regeln und eine kurze README. Lad den Ordner hoch, verlinke die beiden Stylesheets, fertig.

Vier Dinge, die du vor der Veröffentlichung prüfst

• Prüfe die Lizenz. Eine Schriftdatei auf deinem Computer darfst du nicht automatisch auf einer Webseite verwenden. Viele Lizenzen gelten nur für den Desktop und haben eine eigene Web-Lizenz. FontMee erinnert dich mit „deine eigene Datei: prüf die Lizenz vor der Veröffentlichung“. Im Zweifel frag nach, woher du die Schrift hast.
• Prüfe deine Buchstaben. Tipp im Beispielfeld Wörter mit deinen Sonderzeichen (ä, ö, ü, ß, é). Eine Schrift kann perfekt aussehen und trotzdem einzelne Buchstaben nicht haben, die dann in einer Ersatzschrift erscheinen.
• Behalte eine Ersatzschrift. Beende jedes font-family mit serif oder sans-serif, damit der Text auch beim Laden der Schrift gut aussieht.
• Halte es leicht. Eine oder zwei Schriftdateien reichen völlig. Jede weitere Datei macht die Seite etwas schwerer, nimm also .woff2, wenn du kannst.

Noch keine Website? Dann kommt die Schrift an zweiter Stelle. Eine Seite braucht außerdem ein Zuhause, und ein Baukasten ist der schnellste Weg dorthin, ganz ohne Code.

Hol dir die Erweiterung

FontMee ist kostenlos, mit über 1.900 Schriften, CSS kopieren in vier Formaten, einem ZIP zum Selbsthosten und dem Hochladen eigener Schriften. Kein Konto, kein Abo. Füge sie im Chrome Web Store hinzu oder lies zuerst die FontMee-Seite.

Gut zu wissen, bevor du loslegst

FAQ