{"id":2413,"date":"2010-05-22T19:44:05","date_gmt":"2010-05-22T17:44:05","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=2413"},"modified":"2018-02-26T09:15:16","modified_gmt":"2018-02-26T07:15:16","slug":"neue-wege-fur-webschriften-woff-google-fonts-cufon-und-typekit","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2010\/05\/neue-wege-fur-webschriften-woff-google-fonts-cufon-und-typekit\/","title":{"rendered":"Neue Wege f\u00fcr Webschriften: WOFF, Google Fonts, Cufon und Typekit"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Bei meinen Streifz\u00fcgen durch das Contao (Typolight) Extension Repository stie\u00df ich auf eine Erweiterung, von der ich bis dato noch gar nicht geh\u00f6rt hatte: Cuf\u00f3n. Die Folge war eine Kettenreaktion, bei der ich mit Erstaunen feststellte, dass im Web bez\u00fcglich Schriftgestaltung erfreulicherweise einiges in Bewegung ist.<\/p>\n

Alt Bekanntes<\/h3>\n

Dass man im Web nur eine Handvoll websichere Schriftfamilien benutzen kann, war und ist vielen Gestaltern ein Dorn im Auge. Aus diesem Grund hat es schon vor ein paar Jahren mehr oder weniger umst\u00e4ndliche Konstrukte gegeben, mit denen man zumindest f\u00fcr \u00dcberschriften Dekorschriftarten verwenden konnte. So sind hier die Imagerepalcement Methoden<\/a> und sIFR<\/a> zu nennen, die aber nicht wirklich dazu geeignet w\u00e4ren sie in Flie\u00dftexten zu verwenden.<\/p>\n

Cuf\u00f3n<\/h3>\n

\"\"<\/a>W\u00e4hrend bei der sIFR Methode die Schrift im Adobe-Flash Format hinterlegt sein muss, geht Cuf\u00f3n einen anderen Weg \u00fcber Javascript. Ich finde es ganz brauchbar, auch wenn man die mit dieser Technik erzeugten \u00dcberschriften nicht in die Zwischenablage der Maus kopieren kann. Cuf\u00f2n ist sowohl f\u00fcr WordPress als auch f\u00fcr Contao (Typolight) als Plugin\/Erweiterung erh\u00e4ltlich:<\/p>\n

Cufon f\u00fcr WordPress<\/a><\/p>\n

Cufon funktioniert sehr gut, es bleibt jedoch das rechtliche Problem bei lizensierten Schriftarten. Daher sollte man sich auf lizenzfreie Schriftarten beschr\u00e4nken.<\/p>\n

NEU: Google Fonts<\/h3>\n

\"\"<\/a>Einigerma\u00dfen erfreut war ich \u00a0\u00fcber die Meldung, dass Google jetzt Schriftarten anbietet, die sich wirklich einfach und unkompliziert einbinden lassen. GoogleFonts hei\u00dft das, die Auswahl ist bescheiden, aber hochwertig.<\/p>\n

Google Fonts besuchen<\/a><\/p>\n

Typekit<\/h3>\n

\"\"<\/a>Als etwas kompliziertere Variante bietet Google auch den Webfontloader<\/a> an, mit dem auch eine Anbindung an Typekit<\/a> m\u00f6glich ist. Ich habe Typekit bisher in keiner meiner Webseiten eingesetzt, deswegen kann ich nicht viel dazu sagen, au\u00dfer dass es ein kommerzieller Webfont-Mietservice ist, der rechtssicher und gegen Entgeld eine F\u00fclle von Schriften anbietet, die man sonst nur im Print verwenden k\u00f6nnte.<\/p>\n

Mehr Informationen \u00fcber typekit:<\/strong>
\npraegnanz.de\/weblog\/typekit-will-ausgewaehlte-webfonts-cross-browser-faehig-machen<\/a><\/p>\n

Webfonts<\/h3>\n

\"\"<\/a>Ende 2009 titelten viele News-Magazine, dass es ein neues, speziell f\u00fcr das Web konzipierte Schriftformat gibt: WOFF – Web Open Font Format. Es bietet zwei Vorteile:
\n1. Eine WOFF Schrift liegt in einem komprimierten Format vor. Dadurch wird die Ladezeit bei \u00fcber @font-face eingebundenen Schriften verk\u00fcrzt.
\n2. WOFF Schriften sind f\u00fcr das font-linking zugelassen und kommen dennoch ohne DRM (DigitalRightManagement) aus. Beide Formate k\u00f6nnen auf dem eigenen Webserver installiert und \u00fcber CSS3 @font-face vom Browser geladen werden. Der Nachteil: WOFF wird bisher nur vom Firefox 3.6. unterst\u00fctzt.<\/p>\n

F\u00fcr Nicht-Grafiker ist das mit den Schriftformaten nicht so ganz einfach zu verstehen. Deshalb an dieser Stelle ein paar Links zu lesenswerten Artikeln, die etwas Licht in den Fontformatdschungel bringen:
\npraegnanz.de\/weblog\/verwirrende-webfont-situation<\/a>
\npraegnanz.de\/weblog\/eot-und-woff-im-jahre-2010<\/a>
\nhttp:\/\/www.webfonts.info<\/a><\/p>\n

Mein Fazit<\/h3>\n

Am sympathischsten sind mir derzeit die von Google zur Verf\u00fcgung gestellten Schriften. Sollte man da das Gew\u00fcnschte nicht finden, kann man vielleicht bei dafont<\/a> nach einer kostenlosen und frei verf\u00fcgbaren Schrift Ausschau halten, die man dann im Zusammenhang mit Cuf\u00f3n in eine Webseite einbinden kann.<\/p>\n

Typekit und die neuen WOFF-Formate setzen auf CSS3 und das font-linking mit @font-face. Sofern demn\u00e4chst noch mehr Browser als der Firefox das WOFF Format unterst\u00fctzen, w\u00fcrden beide M\u00f6glichkeiten ein ziemliches breites und sehr hochwertiges Spektrum bieten. Im Moment w\u00fcsste ich aber nicht was Kunden bereit w\u00e4ren f\u00fcr diese M\u00f6glichkeiten zu zahlen.<\/p>\n

—
\nTitelfoto: Jens Hertel – Fotolia.com<\/p>\n","protected":false},"excerpt":{"rendered":"

Im Webdesign nicht mehr nur auf die Schriftarten angewiesen sein, die sicher beim Anwender installiert sind – das w\u00fcnschen sich Gestalter schon lange. Nun scheint es, dass neue L\u00f6sungen mit WOFF und Typekit das Ziel in greifbare N\u00e4he r\u00fccken. Aber auch Google und Cufon haben einiges zu bieten.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1219,4],"tags":[32,146,388],"yst_prominent_words":[1212,1213,1214,1215,596,1216,706,1217,731,1218,821,848,1170,1174,1175,1208,1209,1210,1211],"class_list":["post-2413","post","type-post","status-publish","format-standard","hentry","category-aktualisiert","category-webdesign","tag-gestaltung","tag-typografie","tag-schriftgestaltung"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":4,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"predecessor-version":[{"id":4683,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions\/4683"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=2413"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}