Google Webfonts als Custom Fonts im Bricks Builder

Der Bricks Builder gibt die Möglichkeit eigene Schriftarten in das System zu laden. Mit den entsprechenden Datei lassen sich auch Google Webfonts in Bricks als lokale Schriften nutzen.

Ein ausführlicher Beitrag zum Bricks Builder für WordPress folgt noch…

Das Video zum Beitrag

Eigene Schriftarten

Im Menüpunkt “Bricks” finden wir “Eigene Schriftarten”. Hier können wir mit “Neu hinzufügen” die gewünschten Schriften hochladen.

Ich möchte hier als Beispiel die Google Webfont Merriweather in “Regular / Normal” und in “700 / Fett” hochladen.

custom font hinzufuegen

WOFF, WOFF2 und TFF

Damit auf allen Geräten und unter allen Systemen / Browsern die Schriften fehlerfrei angezeigt werden, brauchen wir die Schrift in den Formaten WOFF, WOFF2 und TFF.

Um die benötigten Dateien der Schriften zu bekommen, nutze ich den “Google Webfonts Helper” Online-Dienst unter https://google-webfonts-helper.herokuapp.com/fonts

Hier suche ich aus der Liste meine gewünschte Schriftart und klicke diese an…

google webfont helper

Es werden nun 4 Schritte angezeigt. Unter 1. ist als “Charset / Zeichensatz” “latin” als Standard eingestellt, das sollte so bleiben.

Unter 2. wähle ich meine gewünschten Stile, einmal “Regular / Normal und einmal 700 / Fett.

google webfont helper 2

Unter 3. wird mir der CSS Code zum Einbinden gezeigt. Diesen brauche ich in diesem Fall nicht, dieses regelt der Builder.

Unter 4. Kann ich die erzeugten Dateien nun herunterladen.

google webfont helper 3

Schriften hochladen

Ich entpacke die ZIP Datei und gehe wieder in mein Bricks Backend in die “Eigenen Schriftarten”. “Neu hinzufügen” und gebe einen Namen ein, hier “Merriweather”. Du kannst genauso gut einen eigenen Namen eingeben…

Dann auf “Veröffentlichen”. Nun wird mir unter “Verwalten Sie Ihre benutzerdefinierten Schriftarten” ein Feld mit 400 (Normal) usw. angezeigt.

schriften hochladen

Ich gehe auf “Bearbeiten” und lade die aufgeführten Dateien von meinem Rechner hoch (merriweather-v22-latin-regular…).

drei dateien

Schriftvariante zufügen

Wenn ich meine drei Dateien hochgeladen habe klicke ich auf “Aktualisieren” und “Schriftvariante hinzufügen”. Mit Klick auf das Drop-Down “400 (Normal) kann ich die gewünschte Schriftstärke wählen, hier “700 (Fett)” und lade nun die drei Dateien für die 700er Schriftvariante hoch (merriweather-v22-latin-700…).

zwei varianten 2

Nun wieder “Aktualisieren” und die Schriftart wird mir mit Beispieltext in beiden Stilen angezeigt.

zwei varianten

Die Schriftart anwenden

Ich gehe zu meiner gewünschten Seite, auf “Mit Bricks berabeiten” und klicke auf mein Text / Überschrift Element.

schriftart anwenden

Nun kann ich unter “Stil” “Typografie” “Schriftfamilie” im Drop-Down unter “Eigene Schriftarten” meine Merriweather finden. Unter “Schriftstärke wähle ich meine gewünschte Variante aus und habe den Text in Merriweather…

eigene schriftart
schriftstaerke

Eine Google Webfont lokal genutzt

merriweather font

Bricks Builder

Bricks ist ein Theme mit Template- und Pagebuilder für WordPress.

Schreibe einen Kommentar