Grundlagen Google Font API
Grundlagen zur Verwendung der Google Font API
CSS-Dateien verlinken
Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.
Einfaches Beispiel:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">Etwas aufwändiger:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">
CSS
Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:
body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }
FontLoader
Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.
<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>
Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.
Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts
Popularity: 3% [?]
