Jump to content

Google Web Fonts: Wie explizit kursive/fette Schnitte referenzieren?


Nerdus

Empfohlene Beiträge

Nerdus

Hallo Forum,

ich hoffe, ihr könnt mir weiterhelfen.

Ich möchte gerne über Googles Webfont-Verzeichnis eine Schriftfamilie einbinden – meinetwegen Droid Serif. Das ist soweit kein Problem, Google lässt mich auswählen, welche Schnitte zusammen mit der Seite geladen werden sollen und bis dahin funktioniert alles einwandfrei. Aber wie bringe ich dem Browser nun bei, für die Darstellung einen kursiven oder fetten Schnitt der Schrift zu verwenden?

Mit

font-family: 'Droid Serif'[/CODE]

bekomme ich den normalen Schnitt, aber wie komme ich an die übrigen?

[CODE]font-family: 'Droid Serif Italic'[/CODE]

oder

[CODE]font-family: 'Droid Serif Bold'[/CODE]

(wie es bei den Webfonts von fonts.com funktioniert) tut sich nichts – jedenfalls wird die Schrift dadurch weder kursiv noch fett, sondern nur kleiner.

Bei Google Web Fonts direkt hab ich nichts gefunden, eine allgemeine Googlesuche hat mich auch nicht weitergebracht (aber bei den Suchbegriffen ist das auch kein Wunder …).

Überseh ich da was? Das muss doch möglich sein?

Link zum Beitrag
Sebastian Nagel

Oder, falls es verschiedene Fetten gibt, kann auch

font-weight:500; (normal)

font-weight:700; (fett)

font-weight:900; (black)

verwendet werden. Welche Zahl zu welchem Schnitt passt, müsste dann bei Google oder im Code zum Einbinden der Schrift den Google dir liefert ersichtlich sein.

Link zum Beitrag
Nerdus

Erst mal danke schön, aber so einfach ist es leider nicht (oder Google Web Fonts leistet nicht das, was ich eigentlich erwartet hatte).

Mal als Beispiel bei der Vollkorn:

5525 CONFIG

Das, was sich als »Vollkorn Bold« beziehungsweise »Vollkorn Italic« herunterladen lässt, sieht dann doch deutlich anders aus als das, was der Browser bei »font-weight: 700« beziehungsweise »font-style: italic« produziert.

Wenn man die Schnitte schon zusätzlich laden lässt, müsste man aber doch auch irgendwie auf sie zugreifen können – wenn die Schrift sowieso nur vom Browsers schräg gestellt/»verfettet« wird, kann man sich den Zauber mit den verschiedenen Schnitten ja sparen, das ergibt für mich im Moment nicht viel Sinn.

Wie gesagt, bei den Webfonts von fonts.com funktioniert das mit den richtigen Schnitten problemlos – dann müsste es doch auch bei denen von Google gehen?

post-17720-1355407996,0321_thumb.jpg

Link zum Beitrag
Ralf Herrmann

Was Montype da macht widerspricht dem CSS-Prinzip eine Schriftfamilie zu definieren und die Schnitte der Familie dann ensprechend einzeln über die dafür vorgesehenen Deklarationen auszuwählen. Monotype macht einfach aus jedem Schnitt eine ganze Familie, die man dann eben über den Familiennamen anspricht.

Wenn du künstlich schräggestellte bzw. verfettete Schriften siehst, liegt das wahscheinlich an deinem IE-Browser:

http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/

Link zum Beitrag
Nerdus

Hmm, irgendwo ist da der Wurm drin.

Am Browser kann es eigentlich nicht liegen, ich bin mit Firefox 13.0.1 unterwegs und wenn ich zum Beispiel auf http://wedsgn.ch/ gehe, bekomme ich dort den richtigen kursiven Schnitt zu sehen:

5526 CONFIG

Bei Google Web Fonts sieht es aber dann so aus:

5527 CONFIG

Ich möchte gerne den kursiven Schnitt verwenden, wie er auch auf wedsgn.ch zu sehen ist, und nicht bloß eine schräg gestellte Vollkorn Regular – aber irgendwo hakt es da.

Wie sieht denn bei euch die Darstellung auf der Google-Seite aus – wie bei mir oder wie das Original auf wedsgn.ch?

Edit: Okay, wenn die Vollkorn lokal nicht installiert ist, bekomme ich sie im Browser korrekt angezeigt – aber sobald sie installiert ist, geht die Darstellung im Browser den Bach runter.

Wie schafft man da Abhilfe?

post-17720-1355407996,1051_thumb.jpg

post-17720-1355407996,1828_thumb.jpg

Link zum Beitrag
Ralf Herrmann

Ohne deinen Code zu sehen, schwer zu sagen.

Lokale Fonts kannst du komplett ausschalten, wenn du die Webfonts auf deinen eigenen Server packst und der Familie in der @font-face-Deklaration einen fiktiven Namen (z.B. VollkornWeb) gibst.

Link zum Beitrag
Mueck

ich bin mit Firefox 13.0.1 unterwegs

+1

Bei Google Web Fonts sieht es aber dann so aus:

So schräg sehe ich das auf der Seite nicht.

wie er auch auf wedsgn.ch zu sehen ist,

... oder auf google:

Strg+U ist Dein Freund, dann siehst Du den Quelltext und kannst ggfs. auch styles direkt anklicken oder ggfs. über die Browserzeile erreichen wie bei der Seite, wo sie mit ../ anfängt.

Wenn Du was schräger siehst als wir ... Hmmm ... Dann geht da evtl. irgendwas durcheinander, was sich überlagert ... Irgendwowiewas doppelt gemoppelt ... doppelt gemoppelt ... doppelt gemoppelt ... doppelt gemoppelt ...

Link zum Beitrag
Nerdus

Der Quelltext ist ja nicht das Problem – wie gesagt, der Code scheint ja zu stimmen (und stammt auch nicht von mir, sondern das auf den Screenshots ist die Google Web Fonts-Seite selbst), aber sobald ich die Schrift lokal installiert habe, haut die Darstellung im Browser nicht mehr hin – statt der eigentlich richtigen »Vollkorn Italic« wird dann die »Vollkorn Regular« geladen und schräg gestellt.

Im Moment sieht es bei mir so aus: Habe ich die Vollkorn nicht installiert, erfolgt die Darstellung auf der Google-Seite mit den richtigen Schnitten. Installiere ich die Vollkorn aber lokal, wird auf der Google-Seite statt den einzelnen Schnitten immer nur die »Vollkorn Regular« verwendet (egal welche font-style-/font-weight-Angaben im Quelltext gemacht werden) und dann künstlich schräg gestellt/verfettet. Scheinbar kommt sich da bei den Namen der Vollkorn-Familie irgendwas ins Gehege, beim Versuch die einzelnen Schnitte von der lokalen Quelle einzubinden, anders kann ich es mir nicht erklären.

Auf wedsgn.ch funktioniert es hingegen immer einwandfrei, weil dort gar nicht erst versucht wird, die Schriften direkt vom System des Benutzers einzubinden.

Lokale Fonts kannst du komplett ausschalten, wenn du die Webfonts auf deinen eigenen Server packst und der Familie in der @font-face-Deklaration einen fiktiven Namen (z.B. VollkornWeb) gibst.
Ja, so handhabt es wedsgn.ch auch. Ärgerlich, eigentlich wollte ich mir durch die Verwendung von Webfonts gerade solche Spielereien ersparen, aber nützt wohl alles nichts :mad:

Danke für eure Hilfe!

Link zum Beitrag
Mach

Ich habe das beschriebene Verhalten leider nicht replizieren können (getestet mit Firefox 13.0.1 auf Ubuntu 12.04 und Mac OS X 10.5.8). Das einzige, was ich habe hinbiegen können, ist, dass Firefox die gewöhnliche Vollkorn schief macht (jedoch nicht fett), und zwar indem ich einzig den geraden Schnitt der Vollkorn lokal installiert und die Anwendung von @font-face unterdrückt habe. Dann wird aber auch bei wedsgn.ch keine Schrift eingebunden (und nicht einmal eine Kursive angezeigt – ein schwer wiegender Nachteil der dort verwendeten Methode!).

Auf welchem System bist du denn unterwegs? Hast du ausprobiert, ob das Problem auch im Safe Mode auftritt?

Link zum Beitrag
Nerdus

Danke für die Mühe!

Puh – ich steh hier wirklich im Wald. Ich hab hier einmal Windows XP (32 bit) und einmal Windows 7 (64 bit) jeweils mit Chrome, Firefox und Opera und überall tritt dieses Verhalten auf; der kursive Schnitt der Vollkorn wird nur dann verwendet, wenn ich selbst ihn nicht lokal installiert habe oder wenn ich den Verweis auf die lokale Quelle aus dem @font-face herausnehme.

Ich hab gestern Abend auch noch die restlichen Schriften aus dem »die 10 besten Google-Webfonts«-Artikel durchgetestet, ob dieses Problem bei mir bei allen Google-Webfonts auftritt – aber es betrifft tatsächlich nur die Vollkorn, bei allen anderen ist die Darstellung im Browser identisch, egal ob sie lokal installiert sind oder nicht.

Tja, nun weiß ich auch nicht weiter. Wahrscheinlich werde ich’s einfach dabei belassen, auch wenn es ärgerlich ist. Aber es dreht sich nur um eine kleine private Seite, auf die wohl kaum jemand kommen wird, der die Vollkorn überhaupt auf dem Rechner hat, und selbst dann scheint der Fehler ja nicht zwangsläufig aufzutreten, also ist es wohl zu verschmerzen … Nur für mich selbst ist es doof, weil mir das jetzt natürlich ständig ins Auge springt :peng:

Link zum Beitrag
Mach

Merkwürdig ... Welche Version der Vollkorn verwendest du denn? Ich habe es mit Version 2.001 getestet, die ich von Google Web Fonts heruntergeladen habe (und habe damit dann eben, wie gesagt, dein Problem nicht nachstellen können).

Link zum Beitrag
Nerdus

Wo sehe ich denn die genaue Version?

Aber ich habe die Schrift gestern Abend noch mal neu bei Google Web Fonts heruntergeladen, also kann es daran eigentlich auch nicht liegen.

Ja, merkwürdig ist es wirklich. Weil es hier auf beiden Systemen und in allen Browsern gleich ist, weiß ich nicht mal, wo man da ansetzen könnte, um den Fehler zu suchen :-(

Edit: Ich hab es mir für meine eigene Seite jetzt mit dem »Stylish«-Add-on für Firefox zurechtgebogen, so wird es dann auch auf meinem Rechner richtig angezeigt.

Link zum Beitrag
Mach

Ich habe es jetzt auf Windows replizieren können, und zwar auf Windows7 mit Chrome und Safari sowie auf Windows8 mit Firefox und Chrome. Gut sieht es hingegen aus auf Windows7 mit IE und Firefox 14. Das soll mal einer verstehn ... Der Fehler liegt möglicherweise bei der Vollkorn. FontForge meldet Folgendes: Warning: Mac and Windows entries in the 'name' table differ for Styles (Subfamily) string in the language English (US). Mac String: Italic. Windows String: Regular. Ich habe versucht, das zu flicken und auszuprobieren, aber es ist mir jetzt auf die Schnelle nicht gelungen (Windows ist ja so was von mühsam mit der Deinstallation von einmal installierten Schriften). Am besten wendest du dich wohl an Friedrich Althausen.

PS: Doch, ich habe es prüfen können: Wenn der genannte String korrigiert wird, so ist das Problem behoben (ich hatte die Fonts verwechselt). Vollkorn Regular kann ich allerdings jetzt auch nach Neustart nicht mehr vom System entfernen, es werde benutzt und ich solle geöffnete Programme schliessen ... wenn doch nur irgendein Programm geöffnet wäre ... Windows ...

Link zum Beitrag
Nerdus

Also doch kein böser Voodoo-Zauber, der meinen Rechner verhext hat, das ist ja schon mal etwas …

Wenn sich das Problem beheben ließe, wäre das natürlich super – ich hab Friedrich Althausen mal angeschrieben und auf deinen Beitrag hier verwiesen :-)

Link zum Beitrag
Nerdus

… und es gibt auch schon eine Antwort:

Wenn ich eine Überarbeitung der Vollkorn veröffentliche' date=' werde ich dieses technische Detail mitbedenken.[/quote']

Wunderbar – und noch mal ein großes Dankeschön für deine Hilfe :-)

Link zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
<p>Canapé – die gemütliche Schriftfamilie von Sebastian Nagel</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung