Using @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Eine sehr einfache Art und Weise, Schriften in eine Website einzubinden, die nicht auf dem Client installiert sind. Zur beispielhaften Verwendung der Schrift MyWebFont muss im CSS folgendes definiert werden:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Obiger Code stammt von css-tricks.com.

Wichtig scheint mir zu erwähnen, dass die erstbeste passende Schrift vom Browser eingebunden wird.  Ein FF 32 wird also immer die WOFF verwenden und keine später aufgeführte Quelle. Dies ist abweichend von sonstigen CSS-Angaben, bei denen vorhergehende Definitionen ja immer überschrieben werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.