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:

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.


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: https://paulirish.com/2010/details-on-the-new-google-webfont-api/
https://code.google.com/webfonts

Comments (1)

Sehr guter Einstieg in die Google Font API. Vielen Dank!

Hinterlasse einen Kommentar

Datenschutz Einstellungen
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.