Webfonts & Alternativen

Rebirth

Banned
Registriert
Sep. 2008
Beiträge
2.236
Hey!

Für ein kommendes Projekt möchte ich Webfonts verwenden.
Ich plane, mir HTML/CSS sowie PHP und diverse Kleinigkeiten anzueignen und zu vertiefen. Es handelt sich de facto um ein WordPress Design/Template. Dabei möchte ich für diverse Headings und Titles auf Webfonts bzw. Alternativen zu diesen zurückgreifen.
Ich habe mich bereits informiert, bin mir allerdings nach wie vor nicht sicher. Zusammengefasst:
  • Die Möglichkeit muss einfach und kostenlos sein.
  • Die Einbindung eigener Fonts ist nicht unbedingt nötig (allerdings: kann Cufon das?)
  • Fontfamilies reichen
  • Natürlich sollten sie sich dynamisch verhalten; es ist gut möglich, dass ich mehrere zur Auswahl haben möchte - man sollte sie im Falle von WP also auf der ganzen Seite "austauschen" können.

Ich kenne zwei Möglichkeiten: Google Webfonts & Cufon. Cufon ist etwas komplizierter, und funktioniert via JS, Google ist da wesentlich komfortabler. Dafür ist die Auswahl bei Google begrenzt, Cufon bietet ja die Einbindung per beliebiger Font.
Die Unklarheit befindet sich im Bereich der Qualität. Im Internet lese ich öfters, dass es Probleme mit der Glättung geben kann - inwiefern stimmt das? Zu was ratet ihr mir also, insgesamt?
Achja: Die Auswahl von Google reicht mir vollkommen!
 
Hast du die Möglichkeit, deine User etwas zu erziehen? Was für ein Klientel erwartest du? Wenn du ungestraft erwarten kannst, dass die Leute mit anständigen Browsern bei dir anklopfen, dann nimm einfach font-face (CSS3). Wenn die Leute damit nicht klar kommen bietest du ihnen ein Fallback auf Arial, Verdana oder sonstwas an. Musst du eh machen, egal ob nun über CSS oder JS.

Egal wie du es ansetzt, guck dir die Rechte der Font an.
Bei font-face musst du die Schrift z.B. irgendwo im Web hosten, entweder auf einer zentralen Schriftdatenbank oder bei dir im Webprojekt. So oder so, du musst die Rechte zur Veröffentlichung haben. Wenn dich jemand erwischt, wie du seine 1000€-Font bei dir auf den öffentlichen Server packst, bist du fällig. Bei Cufon musst du immerhin noch sicherstellen, dass du die embedding-Rechte hast.

Was die Qualität angeht: Font-face ist absolut perfekt, wie man auch erwarten sollte. Es ist die natürlichste Darstellung. Cufon hingegen ist eigenartig.
1.) Wenn der Browser (insbesonder Chrome) Hardware-Beschleunigung an hat wird die Schrift teilweise räudigst gerendert, da ist gar nichts zu erkennen.
2.) Der User kann Cufon-Schrift nicht einfach markieren und kopieren. Bei Überschriften ist das noch zu verschmerzen, bei längeren Texten kann es aber richtig stören.
3.) Cufon braucht Zeit. Es braucht Zeit zum Download, es braucht Zeit zum Rendering.

Ich für meinen Teil bevorzuge freie Fonts in Kombination mit font-face. Technologiebremsen müssen halt draußen bleiben.
 
So, wie ich das sehe, erzeugt Google doch nur eine CSS-Datei, die die Schriftart deklariert.
Sowas kann man auch selbst basteln. Such mal nach @font-face. Das ist eine CSS Eigenschaft, die Google für ihre Webfonts verwendet. Die Auswahl erfolgt dann einfach mit font-family.
 
Also ist Font Face gleich Google Fonts? Oder wie muss ich das verstehen?
Gut, das mit den Rechten ist etwas heikel. Aber da Google eh eine öffentliche Auswahl hat, stünde ich doch mit denen auf der sicheren Seite, nicht?
'Erziehen' ist so ne Sache. Die Seite soll modern gestaltet werden - die Konzentration fällt auf die aktuellen User mit aktuellen Browsern. Ja, ein Fallback mit normalen Schriften kommt natürlich dazu. "Am besten sieht die Seite aber mit modernen Browsern aus", so ist das.
Und, ja: Die Webfonts werden ausschließlich für Überschriften, vielleicht auch für kleinere Teile (Zitate, etc.) eingesetzt, sicherlich nicht für den Fließtext. :)
 
Ich habe mich mit Google Web Fonts noch nicht ernsthaft rumgeärgert, bisher waren meine Anforderungen entweder so speziell, dass Cufon herhalten musste (teure Font, für die aber die Embedding-Rechte mit gekauft wurden) oder ich ne 100% freie Font nehmen konnte, die ich dann ungestraft per @font-face eingebunden habe.
Von der grundsätzlichen Funktionsweise sollte Google Web Fonts aber einfach nur eine @font-face - Deklaration sein, es wird ja offensichtlich ein (auf dem Google Server erzeugtes) CSS-File eingebunden und danach normal ne font-family benutzt. Mit anderen Worten: Wer einen Holzbrowser verwendet kriegt eh nix von den leckeren Fonts ab. Interessanterweise kann der IE schon seit Urzeiten font-face, nur leider eben nur für so n total grenzdebiles Format, dass kein Aas nutzt.

Einen großen Vorteil hat Google Web Fonts: Du kannst deine Ressourcen weiter verstreuen. Ein Browser hat keine Probleme damit, mehrere parallele Requests an verschiedene Server zu starten. Er wird aber reichlich zögerlich, sobald es um parallele Requests an einen einzelnen Server geht. Daher ist es ja auch schneller, wenn man Sachen wie MooTools oder jQuery über die asynchrone Google API lädt, statt sie direkt auf dem eigenen Server zu hosten.

Und was das Erziehen der User angeht:
Ich schreibe inzwischen gar keine Fallback-CSS für IE6, nur notdürftigen Kram für IE7 und wer kein JS aktiv hat kann viele Funktionen eh nicht nutzen, dafür sind moderne Seiten eh zu dynamisch. Ich bin sogar dazu übergegangen, nicht-kritische Animationen mit CSS statt mit JS zu lösen. Ist einfach schneller, kleiner, hübscher.
 
Rebirth schrieb:
Also ist Font Face gleich Google Fonts? Oder wie muss ich das verstehen?

Schau dir doch einfach die CSS-Datei an, die Google zur Verfügung stellt:

Code:
@font-face {
  font-family: 'Viga';
  font-style: normal;
  font-weight: 400;
  src: local('Viga-Regular'), url('http://themes.googleusercontent.com/static/fonts/viga/v1/lfIpncSoqrT5_gbJGaWnGQ.woff') format('woff');
}
 
Ah, d.h. die Fontdateien liegen auf den Googleservern, sie werden dann per CSS ganz normal eingebunden und mit eben diesem Dateien verknüpft?
 
Jep, so siehts aus. Vom Google Server kommt das Schnipsel für @font-face und die .woff (aufgerufen über @font-face), dein "lokales" CSS-File bindet dann die Schrift-Familie so ein, wie du es auch mit Arial, Verdana, Comic Sans (für kranke Geister),... machen würdest.
 
Schaue dir auch mal Font Squirrel an. Dort gibt es viele Open Source Fonts als @font-face-Kit in mehreren Formaten für verschiedene Browser.
 
Zurück
Oben