Wie mache ich meine Webseiten schöner?

Jeder, der schon einemal eine Webseite erstellt hat, kennt folgendes Problem:

Du entwickelts dein Webprojekt lokal auf deiner Maschine. Alles sieht gut aus, genau, wie du es dir vorgestellt hast. Dann lädst du diese Seite auf den Webserver und testest, ob es immer noch so aussieht, wie es soll. Ja, alles ist wunderbar!

Dann ruft dich ein Freund an und fragt: Was hast du denn da gemacht? Sieht ja furchtbar aus! Die Texte sehen ganz furchtbar aus und die Abschnitte sprengen dein Seitendesign!

Wie kann das Sein?! Der Grund ist, dass auf deinem System die Schiftarten, die du verwendet hast, existieren uns somit von Browser geladen werden können. Auf anderen Systemen existieren diese vielleicht nicht. Nur Verdana, Arial und eine handvoll anderer Schriftarten sind Standard auf jedem System und somit verfügbar. Du möchtest aber spezielle Schiftarten verwenden, die besser in dein entwickeltes Design passen.

In der Vergangenheit hat man sich damit ausgeholfen, dass man bestimmte Zeilen, die auf jeden Fall in diesem Text angezeigt werden sollten, dann als Bild eingefügt hat. Dies ist aber ein Supergau für die Suchmaschinenoptimierung.

Jetzt hat Google eine neue API entwickelt. Die Benutzung dieser API ist kostenlos: fonts.googleapis.com. Mit dieser API ist es richtig einfach, so ziemlich jede Schriftart, die man sehen möchte, auch auf einer Webseite zu verwenden. Einzige Vorbedingung ist, dass Google diese Schriftart auch gespeichert hat. Man ist aber auch in der Lage, eigene Schriftarten in das Googlesystem hochzuladen und diese dann zu verwenden.

Zum Benutzen eie Schriftart in deiner Webseite benötigst du nur eine einzige Zeile die gleich dem Einfügen deiner Stylesheet-Datei ist:

<link href='http://fonts.googleapis.com/css?family=Lobster'
    rel='stylesheet' type='text/css' />

Nun kannst du diese Schriftart benutzen. In meinem Beispiel habe ich die Schriftart “Lobster” verwendet. Wie jede Schriftart, kannst du sie in deinen Style-Angaben als “font-family” verwenden.

<p style="font-family: Lobster; font-size: 24px;">
  Dies ist ein Text for die Google Font 'Lobster'
</p>

Wenn du das getan hast, kann der Text auf deiner Seite so aussehen:

Meiner Meinung nach ist diese API ein echter Zugewinn für Webentwickler und ich will diese API in der Zukunft zu oft wie möglich bei der Entwicklung von Webanwendungen und/oder Webseiten verwenden.

Print Friendly

4 thoughts on “Wie mache ich meine Webseiten schöner?

  1. Mario Steuck

    hallo. das ist ein toller tipp. wenn ich noch was anfügen dürfte. man kann auch seine eigene schriftart bei google-fonts hochladen und anderen nutzbar machen!
    viele grüße, mario

    Reply
    1. Heike

      Hallo Mario,
      wie genau kann man denn bei google-fonts eigene Schriftarten hochladen? Ich habe dazu leider nichts finden können.
      Danke und Grüße
      Heike

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *