Webdesign-Podcast.de - Podcast für Webdesigner und Grafiker - Bildbearbeitung, Photoshop, Flash, JavaScript, PHP, HTML, CSS

Fonts in Webseiten einbinden

verfasst von Pascal Bajorat, veröffentlicht am 02.07.2010 und noch nicht kommentiert

In dieser Podcast-Folge zeige ich euch, wie ihr Fonts, die nicht zur Standardauswahl der meisten Computer gehören, in Webseiten einbinden könnt. Dabei demonstriere ich euch folgende Möglichkeiten:

Google Font Directory – http://code.google.com/webfonts
Den Blog Artikel zum Font Directory findet ihr hier.

Cufón – http://cufon.shoqolate.com
Den Blog Artikel zu Cufón findet ihr hier.

Podcast-Info:
Titel: Fonts in Webseiten einbinden
Autor: Pascal Bajorat
Länge: ca. 12 Min
Dateigröße: 70 MB

Beispieldateien, die ich im Podcast erstellt habe.

Podcast als *.m4v (QuickTime Player) Datei laden

Video-Podcast in HD 720p über Vimeo ansehen:

Fonts in Webseiten einbinden from Pascal Bajorat on Vimeo.

Fonts mit dem Cufón Script

verfasst von Pascal Bajorat, veröffentlicht am 01.07.2010 und 2 mal kommentiert

Das Cufón Script gibt euch die Möglichkeit, Font-Dateien (z.B. *.otf und/oder *.ttf) in ein JavaScript kompatibles Format zu konvertieren. Für diesen Vorgang gibt es einen speziell dafür gemachten Online Generator, mit dem ihr die Schriften konvertieren könnt und auf die benötigten Zeichen reduziert. Danach ist es ein Einfaches diese Schriften in eine Webseite einzubinden.

Allerdings solltet ihr nie vergessen, dass ihr über das Cufon Script auch anderen eure Schriften zur Verfügung stellt, somit sind hier immer die entsprechenden Lizenzen der Rechteinhaber zu beachten. Um wenigstens ein bisschen Sicherheit zu gewähren, bietet der Generator die Möglichkeit, die Verwendung von den konvertierten Font-Dateien auf eine oder mehrere Domains zu beschränken.

Der größte Vorteil von Cufón ist, dass ihr die umgewandelte Schrift weiterhin über CSS so stylen könnt, wie normale HTML-Schrift. Cufón liest die CSS-Eigenschaften aus und bezieht diese in die generierte Schrift mit ein, sogar ein “mouseover” (:hover) würde über CSS funktionieren.

weiterlesen…

Anzeige - Hier werben…

Google Font Directory beta (Font API)

verfasst von Pascal Bajorat, veröffentlicht am 18.06.2010 und noch nicht kommentiert

Google bietet über seinen neuen Online-Dienst Google Font Directory (Beta) Webdesigner und Webseitenbetreibern die Möglichkeit, individuelle Fonts in die Webseite einzubinden und zu verwenden. Dabei beschränkt sich die individuelle Auswahl allerdings auf ca. 18 OpenSource Fonts wie z.B.: Cantarell, Cardo, Droid Sans Mono, Molengo, Reenie Beanie… um nur einige zu nennen.

Die Verwendung des Google Font Directory ist kinderleicht, Ihr findet die Liste mit allen Fonts auf der entsprechenden Google Code Seite. Dort könnt Ihr einen Font wählen und euch den entsprechenden Code zum Einbinden ausgeben lassen: Google Font Directory

weiterlesen…