Schriften mit @font-face einbetten, so funktioniert’s

In den letzten Wochen habe ich viel experimentiert und nach der besten Lösung gesucht, Non-Websafe Fonts im Webdesign zu verwenden. @font-face ist dabei die einfachste Möglichkeit, da hier nur CSS benötigt wird und nicht Flash oder Javascript, wie z.B. bei Cufón oder sIFR.

Alle modernen Browser unterstützen das Einbetten von Schriften mit @font-face bereits, und für ältere Browser kann man immer auf eine Websafe-Font wie Arial, Verdana oder Georgia zurück greifen. Eigentlich in Ordnung, wenn man sich erst einmal an den Gedanken gewöhnt hat, dass eine Webseite nicht in jedem Browser gleich angezeigt wird.

@font-face Free-Font Kits

Bevor du eine Schrift einbettest, musst du dich informieren, ob das Einbetten mit @font-face für deine Wunsch-Schrift erlaubt ist. Infos dazu findest du in der Schrift-Lizenz. Am einfachsten ist es, du wählst eine Free-Font. Auf Font-Seiten wie Fontsquirrel findest du jede Menge kostenlose Schriften, die bereits mit einem @font-face Kit fürs Einbetten vorbereitet sind.

@font-face Schriften einbetten

Das Kit enthält die generierten Schriften TrueType .ttf, und OpenType .otf für Firefox, Safari, Chrome, und Opera und .eot für den Internet Explorer. Außerdem bekommst du eine Beispiel HTML-Datei und den CSS-Code gleich mit dazu.

Fontsquirrel @font-face Generator

Ist deine Wunsch-Schrift noch nicht als fertiges Kit zu haben, kannst du den @font-face Generator von Fontsquirrel verwenden.

@font-face Schriften einbetten

Hier lädst du einfach deine Schrift von deinem Computer hoch (vorher solltest du unbedingt die Lizenz durchlesen), und markierst die Formate, in die du deine Schrift konvertieren möchtest. Zusätzlich zu TrueType, OpenType und EOT gibt es noch SVG für iPhones und WOFF für Firefox ab Version 3.6.

Mit einem Häkchen bei »Subsettings« kannst du noch bestimmen, welche Sonderzeichen du benötigst.

Die generierten Schriften musst du jetzt lediglich auf deinen Server hochladen (ich sortiere sie immer in einen eigenen »fonts«-Ordner).
Jetzt fügst du den Beispiel CSS-Code aus dem Kit am Anfang deiner CSS-Datei ein (vergiss dabei nicht den Pfad anzupassen, falls du die Font-Formate in einen extra Ordner einsortiert hast).

Beispiel-Code für die Free-Font CalligraphyFLFRegular:

@font-face {
	font-family: 'CalligraphyFLFRegular';
	src: url('CalligraphyFLF.eot');
	src: local('CalligraphyFLF Regular'), local('CalligraphyFLF'), url('CalligraphyFLF.ttf') format('truetype');
}

Anschließend kannst du die Schrift ganz normal mit font-family einfügen. Du solltest aber immer eine websafe-font als Alternative auswählen.

h1.fontface {font-family: 'CalligraphyFLFRegular', Arial, sans-serif;}

Das war’s schon! So einfach kannst du deine Lieblingsschrift in dein neues Webdesign einbauen :-)

@font-face Schriften einbetten

Die CalligraphyFLFRegular wird in GoogleChrome angezeigt.

Hast du eine Frage zum Schriften-Einbetten mit @font-face, oder kennst du besonders schöne Free-Fonts, die man mit @font-face einbetten kann? Dann schreibe mir doch, ich freue mich auf deine Tipps!

32 Kommentare

  1. @Wolfgang: Vielen Dank für deinen Kommentar. Freut mich sehr, dass du meine Beschreibung hilfreich findest :-) Ja, @font-face ist wirklich gar nicht so schwierig :-)

  2. Hallo,

    zwar für einige nichts neues aber habt ihr aber wieder gut beschrieben.
    Die Schriftensteuerung über font-face ist mir weitaus sympatischer als per Flash bzw. sIFR. – zumindest dürfte sie sich gegen deaktivierten Flash und Java-Script durchsetzen.

    Ist denn zufällig auch bekannt ob es dafür auch ein WordPress-Plugin gibt?

    Für weitere Schriften kann man sich vielleicht auch „dafont.com“ ansehen.

    Macht weiter so,
    viel Spaß und Muse für weitere Beiträge!

    Micha

  3. Hallo Ellen,
    Ich find’s so klasse, dass sich die Möglichkeiten in typografischer Hinsicht dadurch so erweitern. Ein bisschen Abwechslung mit neuer Websafe Typo ist echt gut :)

  4. Vielen Dank für diesen interessanten Artikel. Ich finde @font-face auch super. Sicherlich einfacher als die Alternativen, wie Micha schon erwähnt hat. Auf meiner Website habe ich die Schriftart Bienetresocial auf diese Weise eingebunden. Funktioniert super :)

  5. Vielen Dank für eure tollen Kommentare, es freut mich, dass der Artikel so gut ankommnt :-)

    @Micha: Ja, ich denke auch @font-face wird sich gegen die anderen Methoden durchsetzen. Mhh, ich weiss nicht, ob es ein Plugin gibt, werde aber mal recherchieren.

    @Manu: Yep, lets start designing! Jede Menge Spaß mit neuen Typos, das gefällt mir auch :-)

    @Barbara: Bienetresocial gefällt mir echt super auf deiner Webseite :-) und ein bisschen Abwechslung bei den Schriften tun soooooooo gut!

  6. Danke auch für den Artikel – klappt auch super, habe allerdings das Problem, dass mir der Firefox (3.6) die hinterlegte Schrift für ein Projekt nicht anzeigt..kann da jemand helfen?!

    • Hallo Carina,

      vielen Dank für deinen Kommentar. Mhhh, für die Firefox-Anzeige benötigst du die Font-Dateien im Truetype-Format (mit der Endung .ttf) Hast du diese mit übernommen und auch im CSS darauf mit dem richtigen Pfad verwiesen? Wenn du einen Link zu der Seite schickst, kann ich gerne noch einmal reinschauen :-)

      Viele Grüße,
      Ellen

      • Hi Ellen,

        das Projekt ist leider noch geheim;o).
        Für Firefox ist ja vor allem .WOFF wichtig. Habe aber alle gängigen Formate (ttf, otf, svg, woff) auf dem Server zu liegen. Die CSS verweist auch mit richtigen Pfaden darauf. In anderen Browsern klappt es auch, nur im Firefox wird mir leider nicht mein Font angezeigt..

  7. So ich nochmal:o)..hab den Fehler gefunden, mußte in der CSS bei font-family sowohl meinen Font als auch eine Alternativschrift plus die Angabe „sans-serif“ hinzufügen. Für die anderen Browser hat die Angabe meines Fonts/Alternativfonts gereicht.

    Danke trotzdem!

  8. Bunk Gardner 21. Januar 2011

    Wenn Firefox Probleme bereitet, kann es daran liegen, dass die Deklaration für den Internet Explorer nicht an erster Stelle notiert ist, alle übrigen Browser versuchen dann, die eot-Datei zu laden und das funktioniert nicht.

  9. Stephanie 11. Mai 2012

    Hallo,

    besteht auch die Möglichkeit diese neue Schriftart im Editor von Joomla zu nutzen?
    Also quasi den gewünschten Text im Beitrag markieren -> neue Schriftart auswählen -> fertig :) ?

    Dankeschön für jeden Hinweis und Grüsse, Stephanie

  10. Es war schon wieder so:
    Gegoogelt und 1, 2 Seiten angeklickt > mir wurde nicht geholfen. Wieder zurück auf die Suchergebnisseite, Eintrag von elmastudio gesehen, gefreut, angeklickt > mir wurde geholfen. Genau diesen Verlauf hatte ich schon drei mal. Nun zum Vierten. Ich glaube ich werde gar nicht mehr googeln, sondern in Zukunft immer direkt die Suchfunktion von elmastudio.de nutzen. Am Besten für alles. Alles.

  11. Hi,

    auch Ich möchte mich für diesen SUPER-Artikel bedanken!
    Gleichzeitig hätte Ich auch eine Frage ;-)

    Wo genau und in welcher Form gebe Ich die Url/Pfad zum Font an?

    1 @font-face {
    2 font-family: ‚CalligraphyFLFRegular‘;
    3 src: url(‚CalligraphyFLF.eot‘);
    4 src: local(‚CalligraphyFLF Regular‘), local(‚CalligraphyFLF‘), url(‚CalligraphyFLF.ttf‘) format(‚truetype‘);
    5 }

    Auf meinem Server liegen die Fonts in dem Ordner „fonts“

    Vorab vielen Dank für eure Hilfe

    Grüße
    Tanju

  12. Hallo Ellen,

    Du bis und bleibst die BESTE!!!!!!!!!!
    Großes Lob und Respekt schicke ich Dir auf diesem Wege.
    Ich lese jetzt schon seit einiger Zeit deinen Blog und Deine Lösungen sind einfach incredibile!

    Danke, danke, danke,
    lg Egon

  13. Hat schon mal jemand Erfahrung mit dem CSS in Verbindung mit Contao gemacht? Funktioniert das??? Komme leider nicht weiter. Kann mir jemand helfen?

    Wäre supi. Danke! :-)

    Gerne auch per E-Mail

  14. hat mal jemand versucht, dass in einem Newsletter einzusetzen?
    Ich habe verschiedeste Pfadangaben getestet bis zur eingebundenen CSS-Datei – ich bekomme es nicht hin.

    In Webpages klappt der beschriebene Ansatz hervorragend!

  15. Ich würde gerne die Fallback-Schriften testen, also das Szenario, wenn die Web-Fonts nicht angezeigt werden können. Wie kann ich diese Fallback-Schriften testen? Wenn ich im Firefox die Anzeige der Web-Fonts ausschalte, funktioniert Modernizr nicht in dem Sinn, dass jetzt die Fallback-Schriften angezeigt werden. Hat jemand eine Idee?

    Lieben Gruß, Oliver

  16. Hallo,
    ich habe das Problem das die Fonts nicht im FF angezeigt werden. Woran könnte das Lieben ?

    Lieben Gruß,

    Dean

  17. Hi,
    erstmal danke für die tolle Anleitung.
    Leider funktioniert es bei mir nicht so richtig. Ich versuche es im WordPress mit dem Theme „Catch Everest“. Ich habe die Schriften auf den FTP Server in einen Fonts Ordner gelegt. Welchen Pfad muss ich den genau angeben? Oder woran könnte es sonst liegen? Meine Fallback-Schrift wird angezeigt.

    Liebe Grüße
    Anna-Lena

  18. Wenn ich nun mehr als eine Schrift mitliefern möchte per @font-face, und zwar nicht als Alternativschrift für die erste, sondern als gleichberechtigte zweite Schrift, muß ich dann zwei Absätze mit @font-face Script anlegen oder kann das in einem einzigen Absatz angewiesen werden? Kommen dafür eventuell zusätzliche Zeichen im Befehlsscript hinzu, die zu beachten wären?

    • Du definierst für eine weitere Schrift, die du einbetten möchtest, einfach ein weiteres @font-face mit der neuen Schrift

  19. Danke, schöner Beitrag zur Schrifteinbettung.
    Vielleicht noch ne kurze Ergänzung: Um die Schrifteinbettung auch wirklich cross-browserfähig zu machen, sollte man evtl. mehr Alternativformate angeben (z.B. auch das woff-Format) – für den Notfall noch eine SVG-Variante. Aus meiner Sicht sähe das dann so aus:

    @font-face {
    font-family: MeineSchrift;
    src: url(MeineSchrift.eot);
    src: url(MeineSchrift.eot?#iefix);
    src: url(‚MeineSchrift.woff‘) format(woff),
    src: url(‚MeineSchrift.ttf‘) format(truetype),
    src: url(‚MeineSchrift.svg‘) format(svg),
    }

    Dann müssen die Fonts natürlich auf dem Webserver rumhängen (url) und der Pfad nach url(…) ggf. angepasst werden.(Konverter in alle Format-Richtungen gibts online. Aber natürlich immer auf die Lizenzbedingungen der Schriften achten). Falls da was falsch sein sollte, bitte um Korrektur.

  20. Hallo,

    auch wenn der Artikel jetzt schon ein paar Jahre zurückliegt sind die Erklärungen immer noch sehr hilfreich. Ich habe allerdings ein Problem und wollte mal fragen, ob jemand dafür eine Idee hat. Ich möchte auf meiner Seite Josefin Sans einbinden, allerdings wird diese nur von Chrome angezeigt und das auch nur auf dem Rechner, auf dem ich die Webseite bearbeitet und hochgeladen habe. Firefox und der IE zeigen grundsätzlich eine alternative Schrift an und wenn ich die Webseite zum Beispiel auf meinem Laptop über Chrome öffne, wird dort die Schrift ebenfalls nicht mehr angezeigt. Auf dem Server liegen die Schriften im Ordner „fonts“ und mein CSS Code ist folgender:

    @font-face {
    font-family: ‚Josefin Sans semibold‘;
    src: url(‚josefinsans-semibold-webfont.eot‘);
    src: url(‚josefinsans-semibold-webfont.eot?#iefix‘) format(‚embedded-opentype‘),
    url(‚josefinsans-semibold-webfont.woff2‘) format(‚woff2‘),
    url(‚josefinsans-semibold-webfont.woff‘) format(‚woff‘),
    url(‚josefinsans-semibold-webfont.ttf‘) format(‚truetype‘),
    url(‚josefinsans-semibold-webfont.svg#josefin_sanssemibold‘) format(’svg‘);
    font-weight: normal;
    font-style: normal;
    }

    Was habe ich jetzt übersehen?

    Gruß

    Atemü

    • Die Ordnersturktur (Fontsordner) muss auch in der URL stimmen. Des Weiteren muss die Schrift im Body Tag geladen werden. Wenn die Font-Dateien richtig in das Webformat konvertiert wurden, sollte eigentlich alles funken.

  21. Habe in meiner Style.css eine Opentype-Schriftart eingebunden – nun habe ich das Problem, dass Firefox diese Datei einwandfrei darstellt, im InternetExplorer11 jedoch wird diese nicht dargestellt, sondern eine Standard-Schriftart.
    Kennt jemand dieses Problem mit dem InternetExplorer und Schriftarten?

Hinterlasse eine Antwort

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