Google WebFonts Einbinden

Google Fonts einbinden

Lernen Sie jetzt Google WebFonts 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 Google Fonts vertraut, diejenigen, die es nicht sind, folgt eine kuze Einleitung:

Google Fonts ist eine große, kostenlose und großartige Webfont Bibliothek, die Sie jeder frei nutzen kann. Die Webfont Library wird von Google verwaltet und auf den Domains fonts.gstatic.com fonts.googleapis.com bereitgestellt.

Die Zwei häufigsten Möglichkeiten, die Google WebFont Library in Ihrer Website einzubinden sind:

  • Standard (Link rel= Methode): Sie fügen den Link zur Webfont in den Head- oder Kopfbereich Ihrer Website ein. Zum Beispiel: header.php für WordPress.
  • @import: Mit dieser CSS @import Rule fügen Sie Code in Ihr Stylesheet style.css ein.

Diese beiden Optionen eignen für Entwicklungs- und Produktionsumgebungen, persönlich verwenden ich sie nur für zur Entwicklung. Wie bereits erwähnt, ist unser Problem mit GTmetrix. Ich wollte die höchstmögliche Punktzahl erreichen, gleichzeitig stehe ich vor diesen beiden Problemen:

Beide zeigten einen Link zu den Google Fonts, die wir nutzen. Das ist der folgende: https://fonts.googleapis.com/css?family=Roboto+Condensed:400,600

 

Ihre Google Webfont downloaden

Zur Lösung benötigt man Zugriff auf die Datei der Webfont. Der Google Font Download ist einfach und erfordert nur wenige Schritte. Alles, was Sie dazu benötigen, ist ein Zugang zu Ihrem Hoster bzw. Webserver und ein Texteditor. Zum Download 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