So fügen Sie Google Web Fonts in WordPress-Themes auf die "richtige" Weise hinzu

Google-Schriftarten sind eine fantastische kostenlose Ressource für Webdesigner. In WPBv4 haben wir begonnen, eine beliebte Kombination von Google-Schriftarten zu verwenden: Oswald und Lora. Einige unserer Nutzer haben uns gefragt, wie man Google-Webschriften in WordPress-Themes einfügt. Wenn Sie sich erinnern, haben wir gezeigt, wie man Google-Schriftarten im WordPress-Post-Editor hinzufügt. In diesem Artikel zeigen wir Ihnen, wie Sie Google-Web-Schriftarten in Ihre WordPress-Themes einfügen. RICHTIGER Weg , optimiert für Leistung.

Finden Sie die Google Web Fonts, die Sie mögen

Als Erstes müssen Sie eine Google-Schriftart finden, die Ihnen gefällt. Gehen Sie zu Google-Schriftarten und stöbern Sie in der Bibliothek. Wenn Sie eine Schriftart gefunden haben, die Ihnen gefällt, klicken Sie auf die Schaltfläche "Schneller Einsatz" Taste.

Sobald Sie auf die Schaltfläche für die Schnellnutzung klicken, werden Sie auf eine neue Seite weitergeleitet. Scrollen Sie nach unten, bis Sie die Nutzungsanweisung mit dem Code sehen, den Sie in Ihre Website einfügen können.

Sie werden sehen, dass es drei verschiedene Registerkarten zum Hinzufügen der Schriftart zu Ihrer Website gibt. Die erste ist die standardmäßige und empfohlene Methode zum Hinzufügen von Google-Schriftarten zu Ihrer Website. Die zweite Registerkarte verwendet die @import CSS-Methode, und die letzte Registerkarte verwendet die JavaScript-Methode.

Wir werden Ihnen zeigen, wie Sie jede dieser Methoden anwenden können und welche Vor- und Nachteile sie haben.

Hinzufügen von Google Web Fonts in WordPress-Themes

Wir haben vor allem Leute gesehen, die die ersten beiden Methoden anwenden.

Am einfachsten ist es, wenn Sie in Ihrem Theme die style.css Datei und fügen Sie den Code der Schriftarten ein, den Sie auf der Registerkarte @import erhalten haben, etwa so:

 @import url(//fonts.googleapis.com/css?family=Lora); @import url(//fonts.googleapis.com/css?family=Oswald); 

1-Klick-Verwendung in WordPress

Sie können auch mehrere Schriftartenanfragen zu einer einzigen zusammenfassen, und zwar wie folgt:

 @import url(//fonts.googleapis.com/css?family=Lora 

1-Klick-Verwendung in WordPress

Die @import-Methode blockiert parallele Downloads, d. h. der Browser wartet, bis die importierte Datei fertig heruntergeladen ist, bevor er mit dem Herunterladen des restlichen Inhalts beginnt.

Wenn Sie @import verwenden MÜSSEN, dann fassen Sie wenigstens mehrere Anfragen in einer einzigen zusammen.

Leistungsoptimierte Methode zum Hinzufügen von Google Web Fonts

Die beste Methode zum Hinzufügen von Google-Schriften ist die Standardmethode, bei der die Link-Methode anstelle der Import-Methode verwendet wird. Nehmen Sie einfach die Schrift-URL, die Sie in Schritt 1 erhalten haben. Wenn Sie mehrere Schriften hinzufügen, können Sie die beiden Schriften mit einer

Höchstwahrscheinlich müssen Sie Ihre header.php und fügen Sie den folgenden Code oberhalb Ihres Haupt-Stylesheets ein. Das Beispiel würde wie folgt aussehen:

1-Klick-Verwendung in WordPress

Laut dem Google Web Fonts-Blog wird Internet Explorer nichts auf der Seite rendern, wenn vor der @font-face-Deklaration ein Skript-Tag steht, bis das Herunterladen der Schriftdatei abgeschlossen ist.

Sobald Sie das getan haben, können Sie es einfach in der CSS-Datei Ihres Themas wie folgt verwenden:

 h1 { font-family: 'Oswald', Helvetica, Arial, serif; } 

1-Klick-Verwendung in WordPress

Es gibt viele Theme-Frameworks und Child-Themes. Es wird NICHT empfohlen, die Dateien des übergeordneten Themes zu ändern, insbesondere wenn Sie ein Theme-Framework verwenden, da Ihre Änderungen bei der nächsten Aktualisierung des Frameworks überschrieben werden. Sie müssen die Haken und Filter verwenden, die Ihnen das übergeordnete Theme oder Framework bietet, um Google-Schriftarten in Ihren Child-Themes korrekt hinzuzufügen.

Google Fonts in WordPress richtig einreihen

Eine andere Möglichkeit, Google-Schriftarten zu Ihrer WordPress-Website hinzuzufügen, ist das Einreihen der Schriftart in die functions.php-Datei Ihres Themes oder ein site-spezifisches Plugin.

 function wpb_add_google_fonts() { wp_enqueue_style( 'wpb-google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' ); 

1-Klick-Verwendung in WordPress

Vergessen Sie nicht, den Link zur Schriftart durch Ihren eigenen zu ersetzen.

Laden von Google-Schriftarten mit JavaScript

Für diese Methode müssen Sie den Code auf der Registerkarte JavaScript im Abschnitt Anweisungen zur Verwendung von Google-Schriften kopieren und in die Datei header.php Ihres Themes oder Child-Themes direkt nach dem Tag einfügen.

Unser letzter Tipp zur Verwendung von Google Web Fonts auf Ihrer Website ist, dass Sie keine Schriftarten laden sollten, die Sie nicht verwenden. Wenn Sie zum Beispiel nur die fette und die normale Schriftart verwenden möchten, sollten Sie nicht alle anderen Stile hinzufügen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Google Web Fonts auf die richtige Art und Weise in Ihre WordPress-Themes einzubinden, damit Ihre Website schnell laden kann.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.