Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Design » Web-Typografie: @font-face-Einbindung selbst gemacht

Web-Typografie: @font-face-Einbindung selbst gemacht

Artikel weiterempfehlen

  • Aktualisiert am 22. Februar 2023
  • 3 Kommentare
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 5 Minuten

Inhaltsverzeichnis

Webfonts müssen Sie nicht von einem externen Anbieter mieten. Sie können auch ganz normale Desktop-Schriften für einen Browser-übergreifenden Einsatz fit machen, um sie über den eigenen Webserver in die Webseite einzubinden.

Vorsicht bei der Auswahl der Schriften

Dies setzt natürlich erst einmal voraus, dass die Lizenzbedingungen der Schrift dies gestatten. Kommerzielle Schriftlizenzen verbieten praktisch immer, dass die Schrift auf einem öffentlichen Webserver abgelegt wird. Genau dies ist aber beim Einsatz über die @font-face-Regel zwingend erforderlich.

Die Anbieter kommerzieller Schriften setzen momentan vor allem auf die Webfont-Dienste, die im vorigen Teil dieser Artikel-Serie vorgestellt wurden. Nur wenige Anbieter liefern direkt spezielle Webfont-Pakete aus, die man auf den eigenen Webserver laden kann. Möglich ist das zum Beispiel bei den Webschriften von FSI FontShop International oder bei Fontspring.

Man kann jedoch hoffen, dass mit der Durchsetzung des Web-Open-Font-Formates (WOFF) noch mehr Anbieter dies ebenfalls ermöglichen werden.

Freie und Open-Source-Fonts einbinden

Dennoch bieten sich auch jede Menge Freeware- und Open-Source-Fonts zur Einbindung in die eigene Webseite an. Eine Liste mit empfehlenswerten Schriften, die speziell für die @font-face-Einbindung freigegeben sind, können Sie auf webfonts.info einsehen.

Auch die Webseite fontsquirrel.com bieten einen großen Katalog von entsprechenden Fonts. Darüber hinaus ist Fontsquirrel auch die erste Anlaufstelle, um Schriften in die unterschiedlichen Webfont-Formate zu konvertieren. Dazu bietet die Seite einen leistungsstarken @font-face-Generator an.

wfs fontsquirrel Web-Typografie: @font-face-Einbindung selbst gemacht

Schriften mit dem @font-face-Generator in Webfonts umwandeln

Laden Sie zum Beispiel das Fontpaket der Graublau Sans Web herunter. Die Schrift wird als PostScript-basierter OpenType-Font angeboten und lässt sich theoretisch ohne weitere Bearbeitung in Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10) verwenden. Um aber die Browser-Unterstützung und die Darstellungsqualität unter Windows zu optimieren, kommt nun der @font-face-Generator zum Einsatz. Laden Sie zunächst die Schriften zusammen in den Generator hoch und wählen Sie die Expert-Einstellungen. Die möglichen Optionen werden nun detailliert erklärt.

Fontformate

Eine EOT-Version muss für eine Unterstützung des Internet Explorers ab Version 4 in jedem Falle erstellt werden. Mit den SVG-Fonts wird vor allem Mobile Safari auf iPhone und iPad abgedeckt, auch wenn Chrome und Opera dieses Format ebenfalls unterstützen. Alternativ oder zusätzlich kann hier auch die komprimierte Variante SVGZ benutzt werden, die zwar nicht auf dem iPhone funktioniert, aber eine deutlich kleinere Dateigröße bietet.

Das Erstellen des TrueType-Formats bringt die Unterstützung für Safari (ab 3.1), Firefox (ab 3.5) und Opera (ab 10). Zu beachten ist, dass dieser Generator keine komprimierte EOT-Datei erstellt. Tipp: Ist die entstandene Datei zu groß, sollte man besser noch den Umweg über das Tool EOTFast gehen.

Eine zusätzlich erstellte WOFF-Datei vergrößert die Browser-Unterstützung bislang nicht weiter, aber als zukünftiges Standard-Webfont-Format kann man diese Fontversionen ruhig ebenfalls generieren lassen.

Optionen

Die Option „Add Hinting“ bringt für die meisten Fonts eine Verbesserung der Darstellung unter Windows. Sie sollte lediglich abgewählt werden, wenn man weiß, dass die vorliegenden Fonts bereits eine explizite Bildschirmoptimierung mitbringen.

Die Option „WebOnly™“ fügt der Schrift gewisse Modifikationen hinzu, die dazu führen, dass die Fonts zwar von Browsern benutzt werden können, aber sich nicht unter den gängigen Betriebssystemen installieren lassen. Diese Option hilft daher ungewolltes Raubkopieren der Fonts zu verhindern.

Druckschriften können über eine Vielzahl von OpenType-Funktionen verfügen. Da diese aber bislang kaum von Browsern unterstützt werden, ist es meist ratsam, diese beim Webfont-Einsatz zu entfernen, um die Dateigröße klein zu halten. Um dennoch einige Standard-OpenType-Funktionen wie zum Beispiel Ligaturen zu ermöglichen, kann die Einstellung „Keep OT Features“ aktiviert werden.

Die Option „Remove Kerning“ hilft ebenfalls die Dateigröße klein zu halten, da alle Unterschneidungswerte entfernt werden, die für bestimmte Buchstaben-Kombinationen hinterlegt sind. Sollen die Schriften in Fließtexten eingesetzt werden, ist dies durchaus zu empfehlen. Beim Einsatz in Überschriften kann das Fehlen der Unterschneidungswerte aber je nach Schrift zu unschönen Löchern im Wortbild führen.

Die Option „Simplify Outlines“ versucht die Buchstaben-Umrisse zu vereinfachen. Dies ist jedoch mit einem Qualitätsverlust verbunden und eher nicht zu empfehlen.

Die Option „Build Cufón File“ gehört nicht direkt zu den Optionen der @font-face-Einbindung. Weitere Informationen gibt es auf der Cufón-Webseite.

Subsetting

Unter Subsetting versteht man das Entfernen von Schriftzeichen, die im Einsatz nicht benötigt werden. Inwieweit dies erforderlich ist, hängt stark von den jeweiligen Fonts ab. Manche Fonts können tausende Buchstaben unterschiedlicher Schriftsysteme enthalten und damit die Fontdatei auf mehrere Megabyte aufblähen. Solche Fonts sind ohne Subsetting für den Webfont-Einsatz nicht geeignet.

Die Option „Basic Subsetting“ bildet die Standardvariante und bietet die übliche westeuropäische Zeichenbelegung auf Basis des Zeichensatzes MacRoman. Über „Custom Subsetting …“ kann der Anwender völlig frei über den Zeichenumfang entscheiden. Die Option „No Subsetting“ schaltet das Subsetting ganz ab und konvertiert den Font mit allen enthaltenen Zeichen.

CSS-Formate

Der @font-face-Generator erstellt zu den konvertierten Schriften auch gleich die passende CSS-Datei. Dies erleichtert die Arbeit der Webdesigner ungemein, da bei mehreren Fonts und den vielen unterschiedlichen Fontformaten der CSS-Code sehr lang ausfallen kann. Drei Varianten stehen zur Auswahl „Mo‘ Bulletproofer“, „Bulletproof (Original)“ und „Bulletproof (Smiley)“. Eine korrekte Syntax ist entscheidend, damit die Fonts korrekt registriert werden und die vom jeweiligen Browser nicht unterstützten Fonts nicht zusätzlich geladen und damit die Ladezeit erhöhen. Alle drei Varianten lösen dabei verschiedene Browser-spezifische Probleme. Die Smiley-Variante sorgt zudem dafür, dass der Font nicht durch eine lokal installierte Version der Schrift angezeigt wird.

CSS-Optionen

Die Option „Style Linking“ fasst Schriften einer Familie zusammen. Dadurch lassen sich die Fonts später bequem und einfach über font-weight und font-style ansprechen. Das ganze funktioniert aber nur zuverlässig, wenn die Schriftfamilie nicht über mehr als die 4 üblichen Vertreter normal, kursiv, fett und fett-kursiv verfügt. Ansonsten sollte diese Option nicht verwendet werden und die Fonts werden dann alle separat über einen unabhängigen Familiennamen angesprochen.

Die letzte Option „Base64 Encode“ erstellt die Webfonts nicht als separate Font-Datei sondern fügt sie mit einer Base64-Verschlüsselung direkt in den CSS-Code ein. Dies hat zum Beispiel zur Folge, dass die Fonts nicht mehr direkt als Fontdateien im Browser-Cache zu finden sind.

Code-Beispiel

Und so sieht ein Beispiel-Code der @font-face-Einbindung aus.

@font-face {
font-family: 'GraublauWeb';
src: url('graublauwebbold-webfont.eot');
src: local('☺'),url('graublauwebbold-webfont.woff') format('woff'),
url('graublauwebbold-webfont.ttf') format('truetype'),
url('graublauwebbold-webfont.svg#webfontDGhCBjc5') format('svg');
font-weight: bold;
font-style: normal;
}

Der Aufruf der EOT-Datei für den Internet Explorer steht immer an erster Stelle und darf keine Format-Angabe enthalten. Die restlichen Schriftformate sind alle in einem Komma-separierter Aufruf zusammengefasst, der durch die Einleitung mit local() vor dem Internet Explorer versteckt wird. Die SVG-Deklaration enthält zudem einen zusätzlichen Hash-Tag als eindeutige Identifikationsnummer. Dies ist notwendig, da in einer SVG-Datei verschiedene Fonts eingebetten sein können. Der @font-face-Generator von Fontsquirrel kümmert sich jedoch selbstständig um die Vergabe der Identifikationsnummer und deren Einbettung in den CSS-Code.

Ladezeit leidet durch zu viele Fonts

Durch die oben genannten Maßnahmen lassen sich die erstellten Webfonts üblicherweise auf circa 30 bis 60 Kilobyte reduzieren. Größere Fontdateien oder zu viele Fonts auf einer Webseite können die Anzeige der Webseite zu sehr verlangsamen, insbesondere auf mobilen Geräten.

Zwiespältige Zwischenlösung von Firefox

Die meisten Browser zeigen keinerlei Text an, bevor die Webfonts heruntergeladen sind. Bei Firefox wird zwischenzeitlich ein Systemfont benutzt und der Text dann mit der fertig geladenen Webschrift neu umbrochen. Dies nennt man „flash of unstyled text“, ein in vielen Fällen unerwünschter Effekt, der sich nur durch Tricks umgehen lässt.

wfs graublau Web-Typografie: @font-face-Einbindung selbst gemacht
Der mit obiger Methode erstellte Webfont in Safari unter Mac OS X

Im nächsten Teil der Serie lesen Sie:
  • Ausblick – Schrift im Web
(mm),
Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Markus Seyfferth Markus Seyfferth
  • 14. Januar 2022

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben. In der heutigen Aufmerksamkeitsökonomie hat der potentielle Kunde nur eine Aufmerksamkeitsspanne von wenigen Sekunden. Die Verleihung eines Qualitätssiegels, wie das von dem Designpreis Focus Open 2022, kann Dir als Produktdesigner neue Aufträge einbringen. Denn Du darfst damit werben, und platzierst das Gütesiegel natürlich schön prominent auf Deiner Website, sodass es auch jeder innerhalb kürzester Zeit zu Gesicht bekommt. Doch, davor… Nach vielen durchwachten Nächten und kannenweise starkem Kaffee hast Du Dein Produktdesign endlich eingereicht. Nun beginnt das Warten. Trifft Dein Entwurf auf Wohlwollen bei der Jury? Wen aus der Jury muss ich vorher unbedingt noch zu einem Kaffee einladen, um dem Glück auf die Sprünge zu helfen? Wie groß ist die Konkurrenz? Ruhig Blut. Schaue am besten erst einmal auf der Ausschreibungsseite vorbei, lese in Ruhe das Kleingedruckte, und lasse Dich von den Preisträgern der Vorjahre motivieren. Anmeldeschluss ist der 18.3.2022.
  • Design
  • Denis Potschien Denis Potschien
  • 9. November 2021

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.
  • Design, Webdesign
  • Dieter Petereit Dieter Petereit
  • 1. Mai 2019

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver ran gehen.
  • Design, UX Design
  • Dieter Petereit Dieter Petereit
  • 29. April 2019

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun. Amazon hat das schon erkannt und statt einer Verbesserung des Sprachinterfaces zwei Echo-Geräte mit Bildschirm ins Rennen geschickt.
  • Design, UX Design
  • Dieter Petereit Dieter Petereit
  • 19. April 2019

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst.
  • Design, Inspiration, Responsive Design, Showcases, UX Design
  • Markus Seyfferth Markus Seyfferth
  • 10. April 2019

Natives Lazy-Loading kommt in Chrome

Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73.
  • Design, HTML/CSS, Webdesign

3 Antworten

  1. Peter Weiss sagt:
    9. Dezember 2013 um 10:24 Uhr

    Nicht sehr hilfreicher Artikel.
    Leicht gemachte Erklärung, kein Wort über die Einbindung sondern nur über die Konventierung.
    Schade…

    Antworten
  2. Karin Zick sagt:
    30. April 2012 um 16:37 Uhr

    fontsquirrel-Schriften verfügen vermutlich nicht über „ß“ und Umlaute? Das ist oft ein Problem bei frei verwendbaren Schriften, die ja meist von englischsprachigen Anbietern stammen.

    Beste Grüße
    Karin Zick

    Antworten
  3. Bunk Gardner sagt:
    9. Oktober 2010 um 9:42 Uhr

    Ich habe gerade den Font-Face-Generator mit diversen bei Font-Squirrel angebotenen Schriften getestet. Bei jedem Upload im Experten-Modus bekomme ich eine Error-Meldung, die leider nicht kommentiert ist. Woran mag das liegen?

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑