Google Fonts: die passende Schriftart für die Praxis

Uneinheitlich, schwer lesbar oder einfach unschön… Bei der Gestaltung der Praxis-Website machen sich viele Gedanken über den Aufbau und die Bilder (zu Recht), aber nur die wenige geben sich Zeit und Mühe, um die passende Schriftart für die Praxis-Website auszusuchen. Dennoch gehört die Schriftart auch zum Praxis-Design. Wie man es schnell und easy einstellt, zeige ich Ihnen hier. 

Auswahl einer Schriftart für die Praxis-Website

Ursprünglich sollte dieser Artikel das asynchron Laden von Google Fonts und das Dilemma zwischen Pagespeed und Rendering behandeln. Und ich vermute, dass ich demnächst einen Blog-Artikel darüber schreiben werde, weil es für SEO-Experten noch interessanter ist.

Ich habe auf Websites von zahlreichen Praxen festgestellt, dass die Schriftart zu wünschen lässt. Anderer verbreiteter Fehler: es werden mehrere unterschiedliche Schriftarten auf der gleichen Seite benutzt.

Startseite, Unterseite und Nachbearbeitung werden getrennt durchgeführt und am Ende sind Menüs, Titel und Paragraphen jeweils mit eigener Schriftart.

Spontan tendieren die Webmaster die voreingestellte Schriftart des ausgewählten Themes weiterhin zu verwenden. Wer die ganze Seite lediglich über CMS bearbeitet, ohne an den Code heranzugehen, hat manchmal nicht mal die Möglichkeit, diese zu editieren. Die Auswahl einer anderen Schriftart benötigt dann das Installieren eines Plugins (was für Performance immer Schade ist) oder den Kauf der PRO-Version, was weitere unnötige Kosten verursacht. 

Diese Kosten für Ihre Praxis-Website können Sie vermeiden, wenn Sie die folgenden Etappen folgen.

Eigene Schriftart

Sie können Ihre eigene Schriftart erstellen. Es gibt dafür Generatoren. Äußerst kompliziert ist es nicht aber es ist aufwändiger. Ich werde es hier nicht erläutern, weil ich vorhabe, die Schriftart OpenDys in einem Sonderartikel vorzustellen. Eine Schriftart, die speziell für Legastheniker kreiert wurde.

Wenn Sie diese Option wählen, brauchen Sie folgende Dateien:

  • Embedded OpenType font (.eot)
  • Police TrueType (.ttf)
  • Web Open Font Format (.woff)
  • Web Open Front Format 2.0 (.woff2)
  • Scalable Vector Graphic (.svg)
 
So sieht es dann ungefähr aus. In meinem Beispiel sind für die voreingestellte Schriftart des ausgesuchten Themes folgende Dateien:
Eigene Schirftart für Praxis-Website Dateien

Diese Dateien müssen erstmal auf den Server via FTP hochgeladen werden. Wenn es der Fall ist, muss nur die Schriftart mit Ihrem Theme eingebunden werden. Dafür reichen diese Paar Zeilen CSS-Code im style.css Ihres Themes (bzw. des Child-Themes der Praxis-Website) aus.

CSS für Schriftart Anbindung mit Praxis-Website

Die Schriftart kann benannt werden, wie Sie es wünschen. meine-praxis-font habe ich nur als Beispiel genommen. Die im CSS angegebene url muss aber übereinstimmen.

Google Web Fonts

Es gibt eine wesentlich schnellere Variante, um die passende Schriftart für die Praxis-Website zu finden. Diese kann einfach in der Bibliothek Google Fonts.
Tatsächlich startete 2010 diese Google-Plattform, die online und kostenlos Schriftarten anbietet.
In der Bibliothek können Sie sich alle Schriftarten ansehen und vergleichen. Sie werden vermutlich fündig.
Die Website holt sich dann die Informationen online. Die optimale Lösung ist die Google-Fonts direkt auf dem Server zu installieren. Es beschleunigt die Praxis-Website, was immer cool ist, und es wirkt für die Patienten, die Ihre Website besuchen, beim Rendern optisch besser.

Ich erkläre Ihnen wie Sie diese Schriftart schnell (in ein paar Sekunden) einbinden können, was Ihnen eine rasche Personalisierung und Live-Testen auf der eigenen Praxis-Website ermöglicht.

  • Schritt 1
Sie gehen in die Bibliothek von Google: https://fonts.google.com/
Sie schreiben einen Muster-Text, was zu Ihrer Praxis passt. Es kann ein Begrüßungstext sein. Ich tippe in der Regel die wichtigsten Keywords und besondere Zeichenfolge, um eventuelle visuelle Fehler zu vermeiden. Damit meine ich längere Suchbegriffe, Wörter mit Umlaut, Kombination von großen und kleinen Buchstaben oder Zahlen/Buchstaben. Sonderzeichen und Bindestriche sollten auch in dem Satz vorkommen, weil die Zwischenräume u.a. zu breit sein könnten, und dies lässt sich schwer korrigieren.
Heebo-Font Praxis-Website
  • Schritt 2
Die Praxis hat sich für eine schöne Schriftart entschieden. Diese wird anhand des PLUS-Buttons ausgewählt. Ein Fenster mit der Angabe „1 Family selected“ sollte unten erscheinen.
Sie haben eben die Möglichkeit, mehrere „Families“ also Schriftarten auszuwählen. Wie am Anfang des Artikels besprochen, rate ich davon ab, unterschiedliche Schriftarten auf der gleichen Seite zu verwenden. Es wirkt uneinheitlich.
Es können aber Ausnahme geben. Dabei denke ich an Schriftarten, die einer Handschrift ähneln, und für Zitate oder als eine Art Signatur könnten benutzt werden. Ihre Kreativität sollte keine Grenze haben.
CSS-Zeilen für Praxis-Website Fonts

Die Standard-Version wird Ihnen eine Zeile HTML-Code (link), die Sie in den head-Bereich der Webseite einfügen müssen. Die zweite Zeile soll wie hier angegeben in die CSS-Datei Ihres Themes (oder Child-Theme) style.css oder global.css, je nachdem!
Da wir es über CMS und genauer gesagt mit WordPress es einbinden möchten, interessiert uns das Fenster @import.

  • Schritt 3
Wenn Sie sich in dem Admin-Bereich Ihrer WordPress-Seite befinden, suchen Sie nach dem Customizer in der Rubrik Design.
 
Ganz unten gibt es eine Sektion für zusätzliches CSS, in dem Sie Ihre persönliche Anpassungen eintragen können.
Öffnen Sie das Feld und tragen Sie folgende Zeilen ein:
CSS für Praxis-Website mit WordPress

Hier sollten Sie bemerkt haben, dass die <style>-Tags der ersten Zeile verschwinden. Diese gehören hier nicht rein.

Die zweite Zeile hat sich auch geändert. Sie ist nun in Klammern. Davor müssen Sie angeben, für welche Überschriften, die Schriftart gelten muss. Hier handelt sich um ein Beispiel und die Zeile ist nicht vollständig.
Unter anderen sollten die Menüs auch bearbeitet werden.

Schreiben Sie hier Ihren Kommentar

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