Bis das Thema „Google Fonts werden mit YouTube geladen“ zufriedenstellend gelöst ist, binde ich keine Videos über YouTube direkt ein.
Link zum Beitrags-Video https://www.youtube.com/watch?v=Eg6FJSaakGM
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.
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.
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.
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.
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.
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.
Mit „Continue“ schließt du den Vorgang ab.
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.
Links
Google Fonts
https://fonts.google.com/
google-webfonts-helper“.
https://google-webfonts-helper.herokuapp.com/fonts