Google, unser Freund und Helfer, greift mit den Google Web Fonts wieder einmal auf, was Webdesigner aktuell so interessiert und hat bereits eine kleine und (noch) übersichtliche Sammlung von Webfonts aufgestellt. Die Google Web Fonts stehen unter einer Open-Source-Lizenz und bieten die wahrscheinlich einfachste Methode, einen Webfont in die Seiten einzubinden.
Nein, es sind schon ein paar mehr als dieser Ausschnitt – aktuell stellt Google ein rundes Dutzend Webfonts auf.
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Lobster">
Der Link zum Font steht am besten so früh wie möglich im <head> der Seite, insbesondere aber immer vor dem ersten <script>-Tag. Steve Souders erklärt in seinem Blog, (http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/), dass Internet Explorer die Seite nicht rendert, bevor der Font nicht heruntergeladen ist.
Aus dem <link>-Request erzeugt das Font-Application-Interface ein Stylesheet für Firefox & Co
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'),
url('http://themes.googleusercontent.com/fonts/…') format('truetype');
}
und ein anderes Stylesheet für Internet Explorer
@font-face {
font-family: 'Inconsolata';
src: url('http://themes.googleusercontent.com/fonts/…');
}
So ganz ohne kleine Einschränkungen geht die Post allerdings nicht ab.
Wenn Safari, Chrome und Internet Eplorer den Font-Link entdecken, rendern sie den Rest der Seite, aber bis der Font geladen ist, zeigen sie Weißraum.
Firefox hingegen zeigt den Text zunächst einmal im voreingestellten Font und berechnet die Seitendarstellung erneut, sobald der Webfont geladen ist. Diesen Effekt nennt man auch “Flash Of Unstyled Text”