Webfonts Anleitungen

WEBFONT Flashtalk
Drupal Usergroup MUC 20.04.

// Tipps //

• Formate:
  Internet Explorer 4+: eot (Embedded-OpenType)
  Safari, Firefox, Chrome und Opera: .otf
  IE9+, FF3.6+, Chrome 5+: .woff (Web Open Font Format)
  Webkit (ipad/iPhone, Safari): svg

• Einbauen
  @font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot'); }

dann:

h1 {
font-family: 'Graublau Web', 'Arial Narrow', sans-serif;
}

• Fool IE's
  @font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
  url("GraublauWeb.woff") format("woff"),
  url("GraublauWeb.otf") format("opentype"),
  url("GraublauWeb.svg#grablau") format("svg");
  }

---

• Subsetting
  nur bestimmte, benötigte Zeichen einbinden (wird von manchen Anbietern unterstützt)

---

Fonts vor Download schützen
- in htaccess:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebsite.com/.*$ [NC]
RewriteRule .(woff|eot)$ - [F,NC,L]

"Bold" resetten
(ansonten wird bei manchen browsern der eh schon - korrekt - gefettete schnitt nochmal künstlich gefettet)

strong {
font-family: KavaWebPro-Bold;
font-weight = normal;
}

---

FOUT - Flash of Unstyled Text

Lösungen zB:
- Typekit: hat eigene Klassen:
.wf-loading h1 {
/* styles to use before Typekit is loaded */
}

.wf-active h1 {
/* styles to use after Typekit is loaded */
}

• Google:
  "WebFont Loader" - Javascript

// Links //

http://www.google.com/webfonts
kostenlos
aktuell ca 80 fonts
speziell designed/lizensiert

---

http://typekit.com/
attraktive Preise:
- 25,000 Pageviews, 1 Website free
- 50.000 Pageviews 25$ / Year
- 500,000 Pageviews, Full Library access, unlimited Sites 50$ / Year

aktuell ca 600 fonts
auch bekannte standards

---

http://webfonts.fonts.com/
- mehr bekannte, "klassische" schnitte
- einige kostenlose, sonst relativ hochpreisig (€ 10 aufwärts pro Monat und Schnitt)

---

Fontshop:

http://fontfonter.com/
- zum austesten von webfonts (fontshop) auf einer bestehenden website

Auf http://www.fontblog.de/ gibts es eine schöne zusammenfassung: Web_FontFont_Benutzeranleitung.pdf

---

http://www.fontsquirrel.com/
- viele, auch sehr gute freie fonts (z.B Museo)
- Online KOnverter zum Umwandeln eigener ttf's

---

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax