CSS für (Adobe) Garamond und Alternativen

[Þorsten]

Wie sollte eine font-family-Deklaration aussehen, um eine lokal installierte Adobe Garamond, andere passende Garamonds, einen passenden Webfont oder – falls alle Stricke reißen – eine System-Serifenlose zu verwenden?

Im Moment stelle ich mir das ganz einfach vor:

font-family: Garamond, GaramondNo8, sans-serif

GaramondNo8 wird dabei als Webfont über @font-face eingebunden. (Für diesen Einsatzzweck passt die No8 hinreichend gut zum in Adobe Garamond gesetzten Text in der auf der Seite gezeigten Bitmap-Grafik.)

Die Frage ist nun, welche Bezeichnug(en) ich nun genau wählen sollte, um lokal installierte (passende) Garamonds – also die Adobe Garamond (Pro) oder andere passende – zu erwischen? Reicht das einfache »Garamond«? Oder anders rum: Welche vom Webbrowser auswertbaren Schriftnamen haben verschiedene Garamondversionen bei euch?

BTW: Die Apple Garamond darf auf keine Fall gezeigt werden – die passt gar nicht.

Hintergrund

Die Auftraggeberin, eine selbstständige Buchhalterin und Steuerberaterin, hat eine Domain registriert, will auf absehbare Zeit aber nicht die Inhalte liefern, die für eine vernünftige Website notwendig sind. In der Zwischenzeit soll die Homepage lediglich als virtuelle Visitenkarte fungieren und eben einfach ein Foto der papiernen Visitenkarte zeigen (gesetzt in Adobe Garamond italic, fotografiert aus der Vogelperspektive, leicht gebogen auf einer weißen Fläche liegend – das sieht so erst mal ganz schlicht und elegant aus und funktioniert also, zumindest sehr viel besser als eine dieser fürchterlichen Baustellenseiten).

Der einzige Schönheitsfehler ist nur, dass diese Seite so gar nicht suchmaschinentauglich ist, wenn der gesamte Text auf der fotografierten Karte steht. Deshalb sollen ein paar wenige Begriffe (Name, Tätigkeit, Einzugsgebiet) in HTML-Text mit auf die Seite. Nach einiger Experementiererei bin ich zu dem Schluss gekommen, dass das elegant-schlichte Ursprungskonzept der einfach so auf den Tisch (bzw. Desktop via Browserfenster) geworfenen Karte am wenigsten gestört wird, wenn der HTML-Text die gleiche Schrift verwendet. Das funktioniert m.E. trotz der radikal unterschiedlichen Darstellung (Bitmap vs. gerenderter Font), wohl weil der Text auf der Karte durch die perspektivische Verzerrung leicht gedreht und durch die geringe Tiefenschärfe der Fotografie in Bereichen auch ganz leicht verschwommen ist.

Die Idee, als allerletzte Alternative eine Serifenlose zu nahmen, rührt daher, weil keinesfalls die Times (New Roman) als Fallback verwendet werden soll.

[Minimalist]

Warum verlinkst Du dann nicht einfach nur die gewünschte Schrift und fertig? Wozu brauchst Du die anderen Garamonds ...? :raffnix:

[Ralf Herrmann]

Das ist für lokale Fonts leider gar nicht so einfach und auch noch Browser-abhängig.

W3C sagt:

The locally installed <font-face-name> is a format-specific string that uniquely identifies a single font face within a larger family. For TrueType and OpenType fonts, the full font name as defined in the font name table is used to reference a given face. Additionally, for TrueType and OpenType fonts user agents may optionally support Postscript name lookup on platforms where that is appropriate. The notation for a <font-face-name> is the unique font face name enclosed by "local(" and ")". The name can optionally be enclosed in quotes. This also allows for referencing faces that belong to larger families that cannot otherwise be referenced. If a font face with a given full font name or Postscript name is not found, the user agent loads the next font in the list, platform substitutions for the font should not be used.

Konkrete Tipps zu diesem Problem auch in diesem Beitrag: http://hacks.mozilla.org/2009/06/beauti ... font-face/

[Typ Ø]

Wenn du mit dem @font-face-Generator von FontSquirrel.com arbeitest, hast du eigentlich alle aktuellen Browser involviert (wichtig ist, dass neben .ttf- auch .eot- und .svg-Formate verlinkt werden, dann klappt es u.?a. auch mit iOS).

Ansonsten nacheinander mit Komma getrennt die Fontnamen so, wie sie im System mit Namen angezeigt werden. Bei Leerzeichen in der Bezeichnung den gesamten Fontnamen in einfachen oder doppelten Anführungszeichen setzen. Die Garamond-Fonts sind ja alle eigenständig. Dass sie alle »Garamond« im Namen haben, ist dem System wurscht.

[Jens Kutilek]

Vielleicht willst Du ja auch direkt die Adobe Garamond als Webfont per Typekit einbinden? http://typekit.com/fonts/adobe-garamond-pro

[Þorsten]

Hmm, also ich muss mich sehr unverständlich ausdrücken!

Wozu brauchst Du die anderen Garamonds ...?

Datt Janze soll so funktionieren:

1. Wer eine lokal installierte Adobe Garamond hat (oder was das so aussieht), soll das vorgesetzt bekommen.[/*:m:32oz9q6v]
   
2. Gib’s da nichts, soll die GaramondNo8 als Webfont (mittles @font-face) serviert werden[/*:m:32oz9q6v]
   
3. Alle anderen (also die, die weder eine lokale [passende] Garamond haben noch einen Webbrowser, der @font-face kann) kriegen die System-Serifenlose.[/*:m:32oz9q6v]

Ich kann mich nicht darauf verlassen, dass alle Besucher mit webfontfähigen Browsern unterwegs sind. Das Zielpublikum ist sehr divers und oft nicht auf dem neusten Stand der Technik.

Jetzt klarer?

[Þorsten]

Das ist für lokale Fonts leider gar nicht so einfach und auch noch Browser-abhängig.

Die generelle Problematik ist mir durchaus bewusst. Deshalb wollte ich ja mal wissen, wie bei euch die Garamonds so heißen. Das mit der Browseranhängigkeit ist aber ein guter Punkt; ich werde mal eine Testseite machen, mit der hoffentlich ein paar hilfsbereite Garamondbesitzer mal verifizieren können, wie ich ihre Garamonds (nicht) aktivieren kann.

Ein Grund, soweit es geht lokale Schriften zu benutzen, ist das schnellere Rendering (ohne eventuelles »Umschalten« vom System- zum Webfont).

Weiß jemand, ob man das Laden der über @font-face eingebetteten Dateien vermeiden kann, wenn ich font-family-Deklaration ein lokaler Font eine höhere Priorität hat?

[Typ Ø]

Dann verwende alle existierenden und in deinen Augen optisch funktionierenden Fonts der Reihe nach mit Komma getrennt und setze vor »serif« einen Fantasienamen, den du dann auch im CSS bei @font-face angibst. Dann wird die Garamond auf jeden Fall erst verwendet, wenn die anderen im System nicht auftauchen.

Ich bin mir nicht sicher, ob man im CSS bei »local« mehrere Namen angeben kann, die auch wirklich von allen Browsern zuerst durchsucht werden, bevor der Webfont geladen wird.

[Ralf Herrmann]

Wenn es dir um die Adobe Garamond (Pro) geht, dann sehe ich da eigentlich überhaupt keine Probleme. Der "Font Family Name" muss doch sowieso verwendet werden und wenn der z.B. "Adobe Garamond Pro" lautet, wird doch keine andere Garamond genommen, die nicht exakt auf diesen Familiennamen hört. :?

[Minimalist]

Hmm, also ich muss mich sehr unverständlich ausdrücken!

Nee, vermutlich steh ich aufm Schlauch, daher dacht ich ich frag mal, bevor ich die Klappe aufreiße ... ;)

Jetzt klarer?

Nein ;)

1. Wer eine lokal installierte [...][/*:m:33br39vy]

Warum? Ich dachte die No8 ist die, die Du eigentlich haben willst ...? :unsicher kuck: Dann link die doch einfach und fertig, warum komplizierter machen? Die Paar Kb bringen niemanden um, oder ...?

[Þorsten]

Vielleicht willst Du ja auch direkt die Adobe Garamond als Webfont per Typekit einbinden? http://typekit.com/fonts/adobe-garamond-pro

Danke für den Tipp , aber für die zeitlich befristete Baustellenseite ist das vielleicht etwas zu viel des Guten (und die Extrakosten, so moderat sie auch sein mögen, der Auftraggeberin sicher nicht vermittelbar). Ohnehin habe ich die Webfont-Seite ja schon abgedeckt; mir ging’s, wie gesagt, um lokale Alternativschriften.

[Typ Ø]

Dann sammeln wir doch mal:

GaramondNo8, Garamond, Adobe Garamond Pro, Garamond Premier Pro …

Gibt’s noch weitere?

Dann würde ich im CSS angeben:

font-family: GaramondNo8, Garamond, 'Adobe Garamond Pro', 'Garamond Premier Pro', grzyklyx, serif;

Und im @font-face:

@font-face {
	font-family: 'grzyklyx';
	src: url('GaramondNo8.eot');
	src: url('GaramondNo8.woff') format('woff'), url('GaramondNo8.ttf') format('truetype'), url('GaramondNo8.svg#webfontvlg9NCzv') format('svg');
	font-weight: normal;
	font-style: normal;
}

(statt »grzyklyx« irgendwas, was es nicht als Font-Namen gibt.)

Dann wird die GaramondNo8 wirklich erst am Schluss geladen, wenn alle anderen nicht verfügbar sind.

[Þorsten]

Ich dachte die No8 ist die, die Du eigentlich haben willst ...?

Nicht ganz. Die Schrift in der Bitmap-Grafik, die approximiert werden soll, ist Adobe Garamond Pro. Wenn die lokal vorhanden ist, warum sie dann nicht nehmen? (Da dürfte dann die Wahrscheinlichkeit noch am höchsten sein, dass es sich um Grafikfritzen handelt, die den subtilen Unterschied zur frei einbettbaren No. 8 noch am ehesten erkennen dürften.)

Die Paar Kb bringen niemanden um, oder ...?

Sicher nicht, aber es kann bei langsamen Verbindungen zu einem kurzen Flackern kommen (erst wird der Systemfont gezeigt, nach dem vollständigen Laden des Webfonts dann dieser). Warum soll man das nicht vermeiden, wenn es geht?

[Þorsten]

Dann sammeln wir doch mal:

GaramondNo8, Garamond, Adobe Garamond Pro, Garamond Premier Pro …

Gibt’s noch weitere?

Genau das war meine Frage und danach habe ich gesucht, danke!

Dann würde ich im CSS angeben:

font-family: GaramondNo8, Garamond, 'Adobe Garamond Pro', 'Garamond Premier Pro', grzyklyx, serif;

Sowas in der Art schwebt mir vor. Ich tendiere vielleicht eher zu

font-family: 'Adobe Garamond Pro', 'Garamond Premier Pro', GaramondNo8, Garamond, sans-serif;

Die AGP ist das Original in der Bitmap-Grafik; die Premier Pro unterscheidet sich, soweit ich sehen kann, durch den Ausbauzustand; die No8 wird entweder als lokale Version – wenn vorhanden – oder sonst als Webfont bereit gestellt; danach (also nur, wenn Webfonts nicht funktionieren) wird eine sonstige Garamond genommen und zu guter Letzt die System-Sans-Serif.

Die »grzyklyx«-Geschichte kann man m.E. getrost weglassen. Ich habe das Webfontkit der No8 einfach als »GaramondNo8« deklariert. Da nimmt der Browser dann auch die lokale No8, wenn vorhanden, sonst den Webfont. Das ist in dem Fall ja genau das, was ich will, somit gibt’s auch keinen Konflikt.

Vielen Dank an alle Ratgeber nochmal!

[Thomas Kunz]

Das sind meine Garamonds:

Hilft dir das irgendwie weiter?