Google Fonts Download und Einbinden

Google Fonts einbinden

Lernen Sie jetzt Google Fonts einbinden und downloaden DSGVO konform für Top Pagespeed ohne Performance Verluste. Die Nutzung von Google Fonts führt schnell zu Performance Einbußen und wer eine hohe Punktzahl bei GTmetrix erreichen möchte wird die Art und Weise wie man Google Fonts einbindet überarbeiten müssen. Die einzige Möglichkeit, dieses Performance Problem zu lösen, besteht darin, zu lernen, wie man Google-Schriften lokal hosten kann.

Die meisten Menschen sind mit den Google Fonts vertraut. Für diejenigen, die das nicht tun, beschreibe ich sie hier:

Google Fonts ist eine große, kostenlose und großartige Bibliothek von Schriften, die Sie nach Herzenslust nutzen können. Sie wird von Google verwaltet und über die Domains fonts.gstatic.com fonts.googleapis.com bereitgestellt.

Es gibt viele Möglichkeiten, Google Fonts zu Ihrer Website hinzuzufügen, zwei der beliebtesten Optionen sind

  • Standard (Link rel= Methode): Sie fügen den Link der Google-Schriftart in die Kopfzeile Ihrer Website ein. Zum Beispiel: header.php für WordPress-Benutzer.
  • @import: Mit diesen Optionen fügen Sie den Code in Ihr Stylesheet ein. Zum Beispiel: style.css für WordPress-Benutzer.

Diese beiden Optionen eignen sich sowohl für die Entwicklungs- als auch für die Produktionsumgebung, aber ich persönlich verwende sie nur für die Entwicklung.

Wie ich bereits erwähnt habe, war unser Problem mit GTmetrix. Ich wollte die höchstmögliche Punktzahl erreichen, aber ich stand vor diesen beiden Problemen:

Beide zeigten einen Link zu den Google Fonts, die ich auf dieser Website verwendet habe. Das ist der folgende:

https://fonts.googleapis.com/css?family=Alef:700|Öffnen+Löschen:400,600

Um dieses Probleme zu lösen, muss man:

 

Google Fonts Downloaden

Der Google Fonts Download ist eine einfache Sache und erfordert nur wenige Schritte. Alles, was Sie dazu benötigen, ist ein Zugang zu Ihrem Server und ein Texteditor. Damit Sie ihre Google Fonts herunterladen können empfehlen wir den Google Webfonts Helper von Mario Ranftl zu nutzen. Dieser stellt das notwendige CSS für Sie bereit.

  1. Besuchen Sie den Google Webfonts Helper und suchen Sie nach der gewünschten Schriftart.
  2. Wählen Sie die notwendigen Zeichensätze und Stile, die Sie benötigen.
  3. Wählen Sie die Browser aus, die Sie unterstützen möchten,
  4. Kopieren Sie den CSS-Code und fügen Sie ihn in das Stylesheet Ihrer Website ein.

Sie haben zwei Möglichkeiten:

  1. Beste Unterstützung: Sie erhalten diese Schriftartenformate: eot,woff,woff2,ttf,svg
  2. Moderne Browser: Sie erhalten diese Schriftformate: woff,woff2

 

Google Fonts DSGVO konform einbinden

Das folgende Beispiel ist die Schriftart Open Sans mit Unterstützung für alle Browser:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../google-fonts-lokal/assets/fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Bitte vergewissern Sie sich, dass Sie das richtige Verzeichnis für die Dateien der Schriftarten angeben.

  • Laden Sie die .zip-Datei Ihrer Schriftart herunter. Dekomprimieren Sie es und laden Sie die Schriftart Dateien auf Ihren Server.

Und das war’s schon. Die Schriftart, die Sie gewählt haben, wird von Ihrem Server geladen.

 

Google Fonts per WordPress-Plugin einbinden

Wenn Sie noch einen Schritt weiter gehen möchten, können Sie dies in ein Site Specific WordPress-Plugin umwandeln.

Google Fonts lokal mit einem WordPress-Plugin hosten: Um dies zu einem Site Specific WordPress Plugin zu machen, stellen Sie sicher, dass Sie zuerst eine Reihe von Ordnern und Unterordnern erstellen, die ähnlich wie der unten beschriebene aussehen und der gleichen Struktur folgen:

  • google-fonts-lokal/
    • google-fonts-lokal.php
  • assets
    • fonts
      • open-sans-v15-latin-regular.eot
      • open-sans-v15-latin-regular.woff2
      • open-sans-v15-latin-regular.woff
      • open-sans-v15-latin-regular.ttf
      • open-sans-v15-latin-regular.svg
    • css
      • google-fonts-lokal.css

 

  • Legen Sie alle Schriften, die Sie in heruntergeladen haben, in den Ordner /fonts
  • Erstellen Sie innerhalb des Ordners google-fonts-lokal die Datei google-fonts-lokal.php und schreiben Sie diese hinein:

 

<?php
/*
Plugin Name: google-fonts-lokal
Description: google fonts lokal einbinden
Version: 1.0
Author: Coder
Author URI: https://www.p3.marketing
*/

/* Start Adding Functions Below this Line */
// Register Style
function LocalFontsPlugin_styles() {
        // Add CSS file
        wp_enqueue_style( 'LocalFontsPluginCSS', plugin_dir_url( __FILE__ ) . 'assets/css/google-fonts-lokal.css' );
}
add_action( 'wp_enqueue_scripts', 'LocalFontsPlugin_styles' );
/* Stop Adding Functions Above this Line */
?>
  • Erstellen Sie innerhalb des Ordners CSS eine Datei und nennen Sie sie google-fonts-lokal.css. Schreiben Sie darin den CSS-Code, den Sie in Schritt 3 erhalten haben
  • Zippen Sie alles zusammen und laden Sie es als neues Plugin hoch. Aktivieren Sie es und das war’s.

 

google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts

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