Embedden Sie jetzt!

fontatfirefox

Mit @font-face lassen sich Schriften in Webseiten einbetten. Machen Sie das!

Ok, es ist soweit, mit dem neuen Firefox 3.5 (und Safari 4 und Opera 10beta), steht immer mehr Nutzern unserer Websites Fontembeddingdownloading1 zur Verfügung. Damit widerum steht der flächendeckenden Umsetzung typographisch ordentlich gestylter Websites nicht mehr viel im Weg, ausser natürlich die IE-Familie, aber die ignorieren wir hier einfach einmal.2

Und so geht’s

Das obige Beispiel nutzt das Embedding, der Code dafür sieht ungefähr so aus:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz, sans-serif;
	text-shadow: 1px 1px 1px #eee;
}

Der genutzte Font ist die unter CC Lizenz stehende Kaffeesatz. Der Code ist vielleicht nicht ganz selbst erklärend: mit @font-face legen wir selbst eine Font fest, den Namen der font-family kann man dabei frei wählen, ein dem Font nahe stehender Name empfiehlt sich natürlich. Als src wird der Pfad zum OTF– oder TTF-File angegeben, danach noch das format. Fertig. Damit steht uns die font-family „Kaffeesatz” zur weiteren Nutzung zu Verfügung. Das H1 macht auch gleich Gebrauch davon, noch ein wenig versüsst mit etwas CSS3-text-shadow (wenn wir auf den IE sch…sen, dann aber richtg).

Mehr Gewicht, bitte

Folgendes ist zu beachten: wir haben bis hier nur den Font für die font-weight normal definiert. Wollen wir eine bolde Schrift, muss ein Font dafür embedded werden, und zwar bspw. so:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: bold;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz,sans-serif;
	text-shadow: 1px 1px 1px #eee;
}
h2 {
    font: bold 2em/120% Kaffeesatz, sans-serif;
    text-transform: uppercase;
}

In diesem Falle würden die H2s bold gesetzt, da wir hierfür YanoneKaffeesatz-Bold.otf embedded haben. Ähnliches können wir nun auch mit font-style: italic anstellen.

Nochmal zurück zur Fettung: Safari kann einige Fettungsstufen mehr anzeigen als Firefox. Unterstützt wird eine genauere Abstufung des Fettungsgrades, wenn man bspw. einen Font hat die Kaffeesatz. Das kann dann so aussehen:

@font-face {
    font-family: Kaffeesatz;
    font-weight: 100;
    src: url(fonts/YanoneKaffeesatz-Thin.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 300;
    src: url(fonts/YanoneKaffeesatz-Light.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 400;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 700;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}

Das geht sicherlich auch mit keywords wie „light” oder „bolder” etc.

schriftenvergleich

Das Fontrendering unterscheidet sich mitunter, links Firefox, rechts Safari 4 (Mac).

Fonts von der Platte zuerst

Was ja auch angehen kann, ist dass man eher einen Font nutzen möchte, der sowieso schon lokal vorhanden ist und nur wenn dieser nicht vorhanden ist, will man einen Download anbieten. Geht auch, wie man bei John Dagget nachlesen kann, mit der Eigenschaft „local”:

@font-face {
  font-family: NeueHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(fonts/MgOpenModernaRegular.ttf);
}

Hier sind zwei local angegeben, über diese Liste wird iteriert, genauso wie in der normalem font-family Zuweisung, wo die Schriften durch Kommata getrennt werden (das diese Zusammenstellung von Namen nicht immer ganz einfach ist, lesen wir bei Herrn Preidel).

Und nun?

Natürlich sollte man nur Schriften nehmen, die man auch fürs embedding benutzen darf, sonst gibt’s schnell Lizenzärger. Hier gibt’s ein paar freie Schriften, die das ausdrücklich zulassen. Ach ja und zum guten Schluss, sollte man font-size-adjust auf keinen Fall vergssen.

Updates

1) Von „Embedding“ zu sprechen ist eigentlich nicht richtig, weil der Font tatsächlich auf den Rechner des Nutzers heruntergeladen wird. Das schlägst sich natürlich auch in der Größe der Website nieder und ist auch für die Lizenzfrage nicht unerheblich.

2) Na gut, ich hab noch einen Link aus meinen Bookmarks geangelt, der mehr in Sachen IE verrät.

18 Gedanken zu „Embedden Sie jetzt!“

  1. Pingback: Anonymous
  2. kuhl. knappe 10 jahre zu spät, aber dennoch kuhl. man steht dem ganzen thema mittlerweile etwas leidenschaftslos gegenüber, so sehr hat man sich an die monokultur gewöhnt.

  3. Gut was dazu gelernt in diesem Beitrag. Werde das demnächst mal auf einer meiner Seiten ausprobieren.

  4. Weißt du, ob es schon ein Firefox-AddOn gibt, um eingebundene Schriften einfach (also mit Rechtsklick, im Menü oder sogar automatisch) runterladen zu lassen?

  5. Hmmm, nein, ist mir noch nicht über den Weg gelaufen. Bin aber auch nicht ganz up to date mit den neuesten AddOns.

    Die Idee macht das Lizenzproblem natürlich nochmal deutlicher. 😉

  6. Der Name („Kaffeesatz”) wird benutzt, wenn man an anderer Stelle auf diesen Font referenzieren will, also so:

    h2 {font-family: Kaffeesatz;}

    Hinter diesem Familiennamen können sich dann wieder diverse Schriften verbergen, die zu der Familien zusammengefasst sind, beispielsweise die verschiedenen Schnitte.

  7. Vielen Dank für deine Antwort.

    Also handelt es sich hierbei lediglich um eine Art Autor/Copyright-Angabe?

    Wenn man den Namen der font-family frei wählen und benennen kann, wie kann dann der Browser andere Schriftfamilien für diese Schriftart auswählen? Hast du da vielleicht brauchbare Link-Referenzen speziell zu diesem Thema?

  8. Oh Internet Explorer, ich verfluche dich! Wäre es nicht für dich und die Horden von Menschen, die sich von dir benutzen lassen (denn man kann dich nicht benutzen), wäre das eine echt tolle Sache.
    Aber genau wie mit rounded corners und text shadow bist du einfach nur ein fauler, eigenwilliger Schweinehund.

    Aber mal im Ernst… Es ist doch einfach eine Schande, dass solche Techniken funktionieren aber man sie praktisch nicht einsetzen kann.
    Endlich könnte ich aufhören, Überschriften und Ähnliches in PNGs zu packen, nur damit es vernünftig aussieht.

Kommentare sind geschlossen.