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.

Inhalte Erstellen

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

Umstellung auf lokale Fonts

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. 

Roboto Webfont Helper

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. 

Google Fonts beim Affiliatetheme ersetzen

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

Affiliatetheme.io Fonts

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

Affiliatetheme Roboto Fonts

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

Roboto Custom CSS

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

Google Fonts bei Elementor ersetzen

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:

Elementor Pro Custom Fonts

Ü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.

Elementor Standardschriftarten Custom Fonts

Zusammenfassung Woche 4

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. 

Woche 1

Woche 2

Woche 3

Woche 4

Summe

Ausgaben

-

43,16 €

23,66 €

-

66,82 € 

Zeitaufwand

5 Stunden

5 Stunden

5 Stunden

6 Stunden

21 Stunden