Zeichensätze in Webseiten einbinden

Nur um zu zeigen, dass es geht, Sonett Nummer 15 von Edmund Spenser:

Ye tradefull merchants, that with weary toyle
Do ſeeke moſt pretious things to make your gain,
And both the Indias of their treaſures ſpoile,
What needeth you to ſeeke ſo farre in vaine?
For loe my love doth in her ſelfe containe
All this world’s riches that may farre be found.
If ſaphyres, loe her eyes be ſaphyres plaine;
If rubies, loe her lips be rubies ſound;
If pearls, her teeth be pearls both pure and round;
If yvorie, her forhead ivorie weene;
If gold, her locks are fineſt gold on ground;
If ſilver, her faire hands are ſilver ſheene.
But that which faireſt is, but few behold:
Her mind, adorned with vertues manifold.

Das Gedicht oben ist keine Grafik, sondern benutzt einen schönen alten Zeichensatz aus dem 17. Jahrhundert (etwas zu spät für Spenser). Dieser exotische Zeichensatz dürfte aber auf keinem Rechner meiner Leser vorhanden sein, er ist vielmehr derart eingebunden, dass er beim Laden der Seite mit übertragen wird.

Am einfachsten bettet man einen Zeichensatz ein, indem man die ttf- oder otf-Datei in ein Verzeichnis hochlädt, in diesem Fall gleich das, wo die CSS-Datei liegt, und diese Information dann so in die CSS-Datei schreibt:

@font-face {
  font-family: IM FELL English Pro;
  src:url('IMFeENrm29C.otf');
}

Alternativ außerhalb der CSS-Datei, also im Kopf einer konkreten Seite oder sonstwo:

<style type="text/css">
  @font-face: {
    font-family: IM FELL English Pro;
    src:url('http://pfad/zur/datei/IMFeENrm29C.otf');
  }
</style>

Dann kann die Schrift IM FELL English Pro – die Namen kann man natürlich selber wählen – wie jeder andere Zeichensatz verwendet werden, in der CSS-Datei selber oder in einem div-Block anderswo:

<div style="font-family: 'IM FELL English Pro','Times'"> ... </div>

Das Hochladen des Fonts macht in meinem Fall noch einmal 190 KB aus.

Der Zeichensatz, den ich verwendet habe, gehört zu den Fell Types, wenn man dem Link folgt, erfährt man mehr zu deren Entstehungsgeschichte. Man kann dort auch alle dreizehn Fonts anschauen und herunterladen.

Diese Reihe von Zeichensätzen ist unter der SIL Open Font License, Version 1.1 veröffentlicht. Und deswegen darf ich sie hier auch anwenden – die meisten Zeichensätze auf den eigene Rechnern dürften nicht unter einer derartigen Lizenz stehen, so dass man sie vermutlich nicht einbinden darf – denn bei jedem Aufruf einer solchen Seite wird ja der gesamte Zeichensatz an einen fremden Rechner übermittelt.

(Und wie findet man so was? Na, über ein Rollenspielblog natürlich.)

– Man beachte auch das lange ſ. Die Regeln für die Verteilung von langem ſ und s stehen bei Wikipedia oder im Duden. Faustregel, die meist gilt: am Anfang und im Inneren eines Worts oder genauer: Wortbestandteils (Morphem) lang, am Ende kurz. Oft sieht man Altertümelndes ohne langes ſ, da schüttelt man dann immer den Kopf über die Zeiten und Sitten heutzutage.

Beim habe ich die Ligatur durchgeführt, also die typographische Verbindung der beiden Buchstaben. Das ist nämlich ein Standardzeichen. Auf die verschiedenen Ligaturen beim ſ habe ich verzichet. Die sind zwar im Zeichensatz vorhanden, aber in anderen Zeichensätzen – mit kurzem s – gibt es natürlich keine Entsprechung dafür, so dass manche Blogleser noch mehr Schwierigkeiten hätten, den Text zu lesen. Denn nicht alle Browser unterstützen dieses Einbetten von Fonts, wer also einfach die Schriftart Times sieht, sieht leider gar nicht, worum es geht. Safari (außer: iPad etc.), Firefox, Google Chrome, Opera dürften keine Probleme haben; Internet Explorer unterstützt wohl – wen wundert’s – nur das eigene proprietäre Format. Und zumindest mein Windows-Firefox stellt die Schrift auch nicht besonders gut dar, deshalb habe ich sie auch so groß gemacht. Safari glättet die Schrift schon sehr viel besser.

2 Antworten auf „Zeichensätze in Webseiten einbinden“

  1. Übrigens sei in dem Zusammenhang auch mal ein Blick auf das Google Font API empfohlen. Zeichensatz finde ich im Computerzusammenhang einen irreführenden Begriff.

    Ligaturen und Unterschneidungen sind übrigens so Fälle, in denen eigentlich alle Textverarbeitungsprogramme versagen – nur LaTeX macht diese Feinheiten von einem richtigen Buchsatz anständig. (Hier allerdings mit dem Problem, dass Ligaturen nicht überall gesetzt werden und man sie ggf. manuell wieder loswerden muss.) Diese kleinen aber feinen Unterschiede nimmt man oft nicht bewusst wahr, sind aber der Grund warum längere Texte in z.B. MS Word oft irgendwie unbequem wirken und sich nicht so gut lesen lassen. Denn Ligaturen gibt es natürlich nicht nur bei alten Gedichten, sondern – wie eine Lupe schnell beweist – in jedem professionell gesetzten Buch mit Serifenschriften. Gerne kann das jeder mit seinem eigenen Bücherregal nachweisen. :)

    Was Dokumente aus Textverarbeitungen auch unbequem lesbar macht – und den Fehler kann man auch in LaTeX machen – ist der permanente Missbrauch der Schriftart Times, die einfach nicht dafür gemacht ist, auf ganzer Seitenbreite benutzt zu werden.

    Wenn man Seiten mit Sonderschriften aus Firefox drucken will, dann erlebt man unter Linux Unschönes. Sieht ziemlich vernudelt aus…

Schreibe einen Kommentar

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