Content-Erstellung und Custom Fonts: Nischenseite Challenge 2018 – Woche 4

Der Schwerpunkt in der Woche 4 der NSC 2018 lag in der Erstellung von Inhalten. Aber ich habe auch am Design weiter gefeilt und die Google Fonts "lokal" als Custom Fonts eingebunden.

Ich habe mit dem Erstellen zweier Artikel begonnen. Bei dem einen Artikel handelt es sich um einen Übersichtsartikel zum Haupt-Keyword der Nischenwebseite. Eine Möglichkeit wäre diesen Artikel zumindest vorübergehend als Startseite zu wählen.

Der zweite Artikel ist als FAQ angelegt. In diesem Artikel werden die wichtigsten Fragen rund um eine Keyword beantwortet. Sinnvolle Fragen, die das Keyword betreffen, kann man in einschlägigen Foren finden. Gut geeignet sind auch Keyword- und Frage-Tools:

• Keywordtool.io
• Answer the public

Aufgrund der Einführung der DSGVO haben viele Webmaster auf die Google Fonts, die dynamisch beim Aufruf der Webseite von Fonts.Google gezogen werden, verzichtet. Stattdessen werden die Fonts beim Hoster der Webseite gespeichert.

Ich habe mir über die Google Webfonts Helper zunächst mal die beiden Fonts Roboto (sans-serif) und Roboto Slap (serif) in verschiedenen Formaten (EOT,TTF,SVG,WOFF,WOFF2) als Zip-Datei heruntergeladen. 

Dabei sind auch die Lizenz-Bestimmungen für die Nutzung der Fonts zu beachten.  

In der Regel greift das WordPress Theme auf die Google Fonts zurück. Aber es gibt auch Plugins wie der Page Builder Elementor, die die Google Fonts nutzen. 

Die herunter geladenen Fonts werden entpackt und in das Font-Verzeichnis des Themes per FTP hoch geladen:

Für jede Variante der Schrift, die aus der Kombination von Zeichensatz und Style besteht, werden jeweils 5 Dateien (eine pro Format) hochgeladen:

Anschließend muss die CSS angepasst werden. Der Webfont-Helper stellt auch - je nach ausgewählter Schrift - den korrekten css Snippet zusammen:

Dieser muss nur noch in die "Zusätzlichen CSS" innerhalb des Theme Customizer kopiert werden.

Wer Besitzer einer Elementor Pro Lizenz ist, hat es bei der Umstellung der Google Fonts etwas einfacher. Dazu lädt man die einzelnen Fonts unter Elementor --> Custom Plugins hoch:

Über das Auswahlmenü "Weight" kann der "Font-Weight" und über "Style" der "Font-Style" eingestellt werden. Man kann zu einer Schriftart auch mehrere Font-Variationen hochladen, die sich sinnvollerweise im Font-Weight und Font-Style unterscheiden.

Die unter Elementor als Custom Fonts hochgeladenen Fonts stehen nun in Elementor unter Standardschriftarten bereit.

In der Woche 4 der NSC 2018 habe ich mich schwerpunktmäßig mit der Erstellung von Inhalten beschäftigt. Außerdem habe ich mich mit der Umstellung der Google Fonts auf lokale Fonts beschäftigt.