Formular mit Google Fonts verschönern

Legt man im CSS oder im HTML-Code eine Schriftart fest, muss diese auf dem Rechner des Anwenders installiert sein. Deswegen werden meist Standardschriftarten verwendet, bzw. mehrere Schriftarten:

Segoe UI,Arial,sans-serif

Hier wird zuerst versucht Segoe UI zu verwenden. Ist diese Schrift im System nicht vorhanden, wird Arial verwendet, falls diese nicht vorhanden ist, wird es generischer, dann wird einfach eine serifenlose Schriftart verwendet.

Nicht immer will man sich drauf verlassen, was der Anwender installiert hat. Eine Möglichkeit ist die Nutzung von Google Fonts. Dort stehen viele hundert verschiedene Schriftarten zur Verfügung, welche man in seine Webseite einbinden kann. Die Schriftart wird dabei vom Google Server geladen, der Anwender benötigt diese nicht in seinem System.

In diesem Beispiel zeigen wir, wie man ein Formular verschönern kann. Dieses realisieren wir mit der Software DA-FormMaker, aber die Schritte funktionieren auch bei normalen Formularen oder HTML-Seiten.

Inhaltsverzeichnis

Videoanleitung

Anleitung

Wir starten mit der Auswahl der Schriftarten, unter https://fonts.google.com kann man nach verschiedenen Schriftarten und Typen filtern.

Hat man eine Schriftart gefunden, fügt man diese über den entsprechenden Link zur Auswahl hinzu:

Es lassen sich mehrere Schriftarten auswählen. Anschließend können wir uns den Code zum Einbinden anzeigen lassen:

Den ersten Code nehmen wir nun und fügen ihn im Head-Bereich der Webseite ein. Im DA-FormMaker geht dies in den erweiterten Einstellungen:

Im Beispiel verwenden wir das W3CSS-Formular und bearbeiten entsprechend dieses Template. Bei einer fertigen HTML-Seite, editieren wir diese in einem Texteditor und fügen den Code ebenfalls im HEAD-Bereich ein. Dieser Code bewirkt, dass Laden der Schriftart vom Google-Server. Datenschutztechnisch gibt man also durchaus Informationen seiner Besucher an Google weiter. Auch die Ladezeit erhöht sich etwas, da die Schriftart zusätzlich herunter geladen werden muss. Das sollte man vor der Nutzung bedenken.

Anschließend legen wir die Schriftarten für das Formular fest. Dies geht im Reiter Design. Wichtig: der ; am Ende darf nicht übernommen werden.

Im reinen CSS-Code sieht das dann z.B. so aus:

h1 { color:#2196f3; font-family:'Gloria Hallelujah', cursive; font-size:30pt; }
p { color:#000000; font-family:'Indie Flower', cursive; font-size:12pt; }

Kann die Schriftart mal nicht vom Google Server geladen werden, wird eine Standardschrift verwendet. Es besteht also keine Gefahr, dass der Anwender vor einer leeren Seite steht.

Wird jetzt die HTML-Datei im Browser aufgerufen, sollte die Schriftart entsprechend angezeigt werden:

Wie man sieht, recht einfach.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert