Google Fonts lokal in Brizy einbinden

Der Brizy Builder für WordPress und auch Brizy Cloud bieten uns die Möglichkeit eigene Fonts lokal zu installieren. Somit können wir auch Google Fonts datenschutzkonform einbinden.

Die Google Fonts findet du hier
https://fonts.google.com/

Die benötigten Dateien

Zuerst erstellen wir uns die benötigten Dateien aus unserer gewünschten Schriftart. Ich nutze dafür den kostenlosen Dienst “google-webfonts-helper”.
https://google-webfonts-helper.herokuapp.com/fonts

Links oben im Suchfeld gebe ich meine gewünschte Schriftart ein.

google webfonts helper

Unter Punkt 1 können wir Zeichensätze wählen, hier lassen wir den Haken bei “Latin und gehen weiter zu Punkt 2. Hier können wir unseren Schriftstil, die Dicke wählen. Regular / Normal ist immer angehakt. Setze den Haken bei den gewünschten Stilen, eine Vorschau siehst du daneben. Im Screenshot habe ich zusätzlich noch eine Light Variante ausgewählt.

Unter Punkt 3 finden wir den notwendigen CSS Code, um die Schriftarten anzeigen zu lassen. Diesen Punkt können wir überspringen, das übernimmt Brizy für uns.

Unter Punkt 4 können wir die erstellen Dateien als Zip-Datei herunterladen. Diese brauchen wir, um sie in unser System zu laden. Speichere sie auf deinem Rechner und entpacke die Zip Datei. Du findest nun für jede Schriftstärke eine TTF, eine EOT, eine WOFF, eine WOFF2 und eine SVG Datei. Wir brauchen gleich in Brizy die EOT, die TTF, die WOFF und die WOFF2.

dateien
Mac Screenshot

Im Brizy Backend die Dateien hochladen

Wir gehen ins Brizy Backend einer Seite und rufen das Styling Panel auf. Wir wählen eine beliebe Vorgabe, zum Beispiel “Paragraph” und klicken auf “Add New Font”. Nun können wir aus den Google Fonts wählen oder über “Upload” eigene in das System laden.

upload

Wir klicken auf “Upload” und geben unserer Schrift eine Bezeichnung. Ich nehme hierbei immer den originalen Namen, so komme ich später nicht durcheinander. Du kannst hier aber eingeben, was du möchtest. Klick auf “Continue” und weiter geht es.

namen neu

Schriften hochladen

Jetzt können wir unsere Varianten eingeben. Standardmäßig ist “Normal” eingestellt und wir können unsere entsprechenden Schriftdateien für die “normale Dicke” hochladen. Nun können wir unsere Dateien in Brizy laden. Achte bei verschiedenen Stärken auf die richtige Variante. Normal ist “regular”, dünn ist “light” usw., wie du es im “google-webfonts-helper” unter Punkt 2 beschrieben siehst.

google font

Mit “Add Font” kommst du zu “Add new font variation” kannst du eine weitere Schriftstärke hinzufügen. Bei “Font Weight” wähle deine Variante im Dropdown-Menü und lade die benötigten Dateien hoch.

light

Mit “Continue” schließt du den Vorgang ab.

finish

In Brizy

Du findest deine Schriften im Styling Panel oben in der Liste, getrennt durch einen Strich von den Web Fonts. Bei Brizy werden nur die gewählten Schriften geladen. Das heißt, du musst nicht die übrigen Schriften deinstallieren.

font panel

Google Fonts
https://fonts.google.com/

google-webfonts-helper”.
https://google-webfonts-helper.herokuapp.com/fonts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.