Möchten Sie Google Webfonts in Ihr WordPress-Theme einbinden?
Google Fonts ermöglicht es Ihnen, schöne Webfonts einfach auf Ihrer WordPress-Website zu verwenden. Sie können sie verwenden, um die Typografie, Benutzererfahrung und Ästhetik Ihrer Website zu verbessern.
Dieser Artikel zeigt Ihnen, wie Sie Google Web Fonts ordnungsgemäß zu WordPress-Themes hinzufügen.
Hier ist ein kurzer Überblick über die Themen, die wir in diesem Leitfaden behandeln werden.
- Die besten Google Fonts für Ihr WordPress-Theme finden
- Methode 1. Google Fonts mit einem Plugin zu Ihrem Theme hinzufügen
- Methode 2. Google Web Fonts zum Header Ihres Themes hinzufügen
- Methode 3. Google Fonts in das Stylesheet des Themes einfügen
- Methode 4. Google Fonts in WordPress richtig einreihen
- Bonusteil: Wie Webfonts die WordPress-Geschwindigkeit beeinflussen
Die besten Google Fonts für Ihr WordPress-Theme finden
Das Erste, was Sie tun müssen, ist, die Google-Schriftarten zu finden, die Ihnen gefallen. Besuchen Sie einfach die Google Fonts-Website und stöbern Sie durch die Bibliothek.
Wenn Sie eine Web-Safe-Schriftart finden, die Ihnen gefällt, klicken Sie darauf, um die verschiedenen verfügbaren Stile anzuzeigen.
Sie können die Stile auswählen, die Sie auf Ihrer Website verwenden möchten.
Klicken Sie als Nächstes auf die Schaltfläche „Ausgewählte Familien anzeigen“, wodurch sich eine Seitenleiste öffnet.
Von hier aus sehen Sie die Anwendungshinweise unter dem Abschnitt „Verwendung im Web“.
Sie werden sehen, dass es zwei verschiedene Tabs zum Hinzufügen der Schriftart zu Ihrer Website gibt
Die erste ist die Link-Methode, die der empfohlene Standardweg zum Hinzufügen von Webfonts ist.
Der zweite Tab verwendet die @import CSS-Methode, mit der Sie die Schriften über Ihre CSS-Stylesheet laden können.
Wir zeigen Ihnen, wie Sie jede dieser Methoden anwenden und was ihre Vor- und Nachteile sind.
Hinweis: Für einige dieser Methoden müssen Sie Ihre WordPress-Theme-Dateien bearbeiten. Sie können dies tun, indem Sie sich mit einem FTP-Client oder der Dateimanager-App in Ihrem Hosting-Kontrollpanel mit Ihrer Website verbinden.
Sobald Sie verbunden sind, müssen Sie den Ordner /wp-content/themes/Ihr-Theme-Name/ besuchen. Dort finden Sie Theme-Dateien, die Sie für dieses Tutorial möglicherweise bearbeiten müssen.
Weitere Details finden Sie in unserem Tutorial, wie Sie Code-Schnipsel in WordPress kopieren und einfügen.
Methode 1. Google Fonts mit einem Plugin zu Ihrem Theme hinzufügen
Für diese Methode verwenden wir ein WordPress-Plugin, um Google Fonts zu laden.
Zuerst müssen Sie das Schriftarten-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Darstellung » Anpassen besuchen, um den Theme-Customizer zu starten. Von hier aus sehen Sie den neuen Reiter für das Schriftarten-Plugin.
Ein Klick darauf zeigt Ihnen die Plugin-Optionen.
Sie können Google Fonts für verschiedene Bereiche Ihrer Website verwenden.
Alternativ können Sie auch einfach eine Schriftart für Ihr WordPress-Theme laden.
Wechseln Sie einfach zum Tab Erweiterte Einstellungen » Nur Schriftarten laden.
Von hier aus können Sie die Google Fonts auswählen, die Sie für Ihr WordPress-Theme laden möchten.
Geben Sie einfach den Namen der Schriftart ein und wählen Sie sie dann aus.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche "Veröffentlichen" zu klicken, um Ihre Änderungen zu speichern.
Wenn Sie die erweiterten Funktionen des Plugins verwendet haben, um Schriftarten für verschiedene Bereiche Ihrer Website zuzuweisen, dann funktionieren diese automatisch.
Wenn Sie sich andererseits dafür entschieden haben, nur Schriftarten zu laden, müssen Sie benutzerdefinierte CSS-Regeln für sie hinzufügen. Hier ist zum Beispiel, wie Sie eine Schriftart für das Absatz-Element auf Ihrer gesamten Website laden würden.
p {
font-family: 'Open Sans', sans-serif;
}
Methode 2. Google Web Fonts zum Header Ihres Themes hinzufügen
Diese Methode ist der einfachste Weg, Google Fonts direkt zu Ihrem WordPress-Theme hinzuzufügen.
Bearbeiten Sie einfach die Datei header.php für Ihr WordPress-Theme oder Child-Theme. Kopieren und fügen Sie dann den Link-Code vor Ihrem WordPress-Theme-Stylesheet-Link-Code ein.
So würde es aussehen:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Grundsätzlich besteht das Ziel darin, die Schriftartanforderung so früh wie möglich zu platzieren. Dies ermöglicht dem Browser des Benutzers, Schriftarten herunterzuladen, bevor die Seite gerendert wird.
Sobald Sie dies getan haben, können Sie die Schriftart in der CSS-Datei Ihres Themes verwenden:
h1 {
font-family: 'Open Sans', sans- serif;
}
Methode 3. Google Fonts in die Stylesheet des Themes einfügen
Für diese Methode importieren wir die Schriftart-CSS in die Haupt-CSS-Datei unseres WordPress-Themes.
Bearbeiten Sie einfach die Datei style.css im Stammordner Ihres WordPress-Themes und fügen Sie den Code aus dem Tab „@import“ am Anfang der CSS-Datei hinzu.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
So sah es in der style.css-Datei unserer Demo-Website aus.
Wichtig: Stellen Sie sicher, dass Sie die @import-Zeile am Anfang Ihrer CSS-Datei hinzufügen.
Methode 4. Google Fonts in WordPress richtig einreihen
Die ersten beiden Methoden, die wir zuvor erwähnt haben, erfordern, dass Sie Schriftarten direkt hinzufügen, indem Sie Ihre WordPress-Theme-Dateien bearbeiten.
Dies funktioniert gut, wenn Sie ein Child-Theme verwenden, um alle Ihre Änderungen vorzunehmen.
Wenn Sie diese Änderungen jedoch am Haupt-Theme vornehmen, gehen Ihre Änderungen beim nächsten Theme-Update verloren.
Eine einfachere Lösung dafür ist, programmatisch Code hinzuzufügen, der Google Fonts automatisch für Ihr WordPress-Theme lädt.
Dazu müssen Sie einen benutzerdefinierten Code-Schnipsel zu einem standortspezifischen Plugin oder mithilfe eines benutzerdefinierten Code-Plugins hinzufügen. Details finden Sie in unserem Tutorial zum Hinzufügen von benutzerdefiniertem Code in WordPress.
Fügen Sie einfach den folgenden Code-Schnipsel zu Ihrer WordPress-Website hinzu.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Hinweis: Vergessen Sie nicht, die URL durch die URL der Google Fonts zu ersetzen, die Sie hinzufügen möchten.
Das ist alles, WordPress wird nun die Link-Methode verwenden, um automatisch Google Fonts abzurufen, die Sie hinzugefügt haben.
Sie können dies bestätigen, indem Sie den Quellcode Ihrer Website anzeigen. Dort sehen Sie, dass Ihr Google Fonts-Stylesheet im Fußbereich Ihrer Website hinzugefügt wurde.
Bonusteil: Wie Webfonts die WordPress-Geschwindigkeit beeinflussen
Google Fonts laden extrem schnell, da sie über das massive CDN-Netzwerk von Google mit Serverstandorten auf der ganzen Welt bereitgestellt werden.
Da diese Schriftarten von Millionen von Websites verwendet werden, besteht eine gute Chance, dass die Benutzer sie bereits im Cache ihres Browsers gespeichert haben.
Dies reduziert die Auswirkungen auf die Leistung Ihrer Website-Geschwindigkeit. Sie können diese Auswirkungen weiter reduzieren, indem Sie nur eine oder zwei Webfonts in Ihrem Design verwenden.
Für weitere Tipps lesen Sie unseren vollständigen Leitfaden zur WordPress-Leistung und -Geschwindigkeit für Anfänger.
Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie Google Web Fonts einfach zu Ihrem WordPress-Theme hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Erstellen eines benutzerdefinierten WordPress-Themes von Grund auf ohne Code und unsere Liste der besten kostenlosen Website-Hosting-Dienste sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Jiří Vaněk
Es ist großartig, dass Sie Informationen darüber bereitgestellt haben, wie man Schriftarten lokal auf einer Website lädt. Ich habe lange mit der Geschwindigkeit gekämpft und versucht, alles zu optimieren. Dies war die erste Website, auf der mir jemand riet, Schriftarten lokal zu laden, und es funktioniert wirklich. Es waren nur Millisekunden, aber trotzdem verbesserte sich die Geschwindigkeit der Website. Manchmal machen diese Millisekunden den Unterschied zwischen Grün und Orange in PageSpeed Insights oder der Google Search Console.
Armando
Mir ist aufgefallen, dass dieses Video/diese Anleitung aus dem Jahr 2015 stammt und die Screenshots usw. anders sind. Als ich versuchte, den Google Fonts-Code wie gezeigt in meine header.php-Datei einzubetten, wurde ein Fehler angezeigt. Ich denke also, dass dieses Tutorial vielleicht aktualisiert werden muss? Ich bin mir nicht sicher, aber... Danke.
WPBeginner Support
Vielen Dank für Ihr Feedback, wir werden diesen Artikel bei Gelegenheit aktualisieren.
Admin
Wout
Danke für den Artikel! Bitte ersetzen Sie http: in fonts.googleapis.com/css… durch https: in der Funktion zum Einbinden von Google Fonts, um einen verschlüsselten Link zu googleapis.com… zu aktivieren.
WPBeginner Support
Thanks for pointing this out, we will be sure to update the links as soon as we are able
Admin
Sofia
Ich bin ziemlich sicher, dass es 2017 ist, warum wir das alles lernen müssen :”((
charles
Ist das immer noch der richtige Weg, das zu tun?
Renee
Ich habe die Schriftart zum Anzeigen gebracht, aber ich kann nicht herausfinden, wie ich sie fett bekomme.
Hier ist ein Beispiel dafür, was ich im CSS gemacht habe
font-family:”Open Sans”, sans-serif;
font-weight:bold;
In dem Link, den ich zu meinem header.php hinzugefügt habe, habe ich Folgendes hinzugefügt:
Ich habe versucht, 700 für fett zu ersetzen, aber ohne Erfolg...
Irgendwelche Ideen?
Danke im Voraus
Isaac Anderson
Stellen Sie sicher, dass Sie die gewünschten Schriftstärken auf Google Fonts überprüfen, nachdem Sie sie im Tab „Anpassen“ ausgewählt haben.
Louis
Funktioniert perfekt! Danke.
josh
Huh? Was zum Teufel bedeutet das alles? Wie kann ich eine Google-Schriftart in meinem Beitrag oder meiner Seite hinzufügen?
Shubham Kumar
Was halten Sie davon, Google Web Fonts asynchron über JavaScript zu importieren, wie hier erwähnt:
Danke
Shubham
Jordan
Eine schnelle Frage – ich habe die Code-Referenz für wp_enqueue_style() nachgeschlagen. Das erste Argument ist ein String, der den Namen des Stylesheets bezeichnet. In Ihrem Beispiel verwenden Sie für das erste Argument 'wpb-google-fonts'. Woran kann ich erkennen, was ich hier für meine Website eintragen soll?
pete rome
Wo genau füge ich die Sachen im Header ein? Ich sehe das immer, aber die Leute erklären nie genau, wo es ist.
Carla DeLauder
Was macht „false“ in dieser Funktion? Andere eingebundene Funktionen enthalten es nicht.
Danke.
Kev
das ist das Argument für Header oder Footer. Da es Best Practice ist, [fast] alle Skripte im Header zu platzieren, ist der Standardwert „true“ => Footer, während „false“ bedeuten würde, dass sie NICHT im Footer, sondern stattdessen im Header platziert werden.
Leider stoppen Schriftart-Skripte alles andere beim Laden, daher ist es etwas ungünstig, sie im Header zu platzieren. Deshalb spricht dieser Artikel darüber, sicherzustellen, dass Sie nur die Schriftarten einbinden, die Sie tatsächlich verwenden werden. Auf der anderen Seite kann das Platzieren im Footer dazu führen, dass Standard-Schriftarten wie Arial kurzzeitig auf Ihrem Bildschirm geladen werden, bis die Webfont geladen ist. Es ist ein schrecklicher Nachteil, aber es ist, wie es ist.
Eine Praxis, die ich in meinen Workflow integriere, ist das bedingte Laden von Schriftarten basierend auf ihrer Verwendung auf der Website. Zum Beispiel, vielleicht wird „fett“ nur in h2 und h3 in Blog-Post-Vorlagen (single.php) verwendet, dann schreibe ich eine bedingte Einbindung für das fette Skript, das nur dann eingebunden wird, wenn es sich um die single.php-Vorlage handelt.
Ich hoffe, das hilft.
Kev
Außerdem zu beachten.
Mit „fett“ meinte ich eine bestimmte fette Version einer Schriftfamilie. <= nur zur Info.
Kenneth John Odle
Ab WordPress 3.3 ist wp_print_styles veraltet.
Bram
Ja, Sie sollten diesen Artikel aktualisieren.
WPBeginner Support
Aktualisiert.
Admin
WPBeginner Support
Wir haben den Artikel aktualisiert. Er zeigt nun, wie Google Fonts mit der richtigen
wp_enqueue_style-Funktion und dem wp_enqueue_scripts-Action-Hook hinzugefügt werden.Admin
isak
Wie reiht man zwei Schriftfamilien über functions.php ein?
April
Ich benutze das Punch Fonts Plugin, um Google Fonts hinzuzufügen, bin mir aber nicht sicher, wie ich nur Überschrift 1 für die gewünschte Schriftart bekomme. Ich brauche diese Schriftart nicht für Überschriften 2-6, also möchte ich die Google-Schriftart nur für Überschrift 1 verwenden. Wie schreibe ich das in den Parameter?
Derzeit verwende ich: Oleo+Script+Swash+Caps:400
Melissa
Nun, wenn jemand feststeckt, gibt es auch dieses Plugin namens Easy Google Fonts. Sehr hilfreich.
Melissa
Hallo,
Ich habe alle drei Methoden ausprobiert, aber keine davon hat vollständig Wirkung gezeigt. Es scheint, dass sie nur auf bestimmte Elemente angewendet wird und nicht auf andere, die ich mit dieser Schriftart im Stylesheet angegeben habe
Wenn ich den Element-Inspektor für das Element verwende, auf das meine Google-Schriftart nicht angewendet wird, sehe ich Folgendes:
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;
Was bedeuten diese \\ um meine Schriftart? Ich meine, es sieht so aus, als ob es einen Fehler anzeigt, aber ich kann nicht herausfinden, was ich falsch mache? Was könnte es sein? Ein Code, der meinen überschreibt, mit höherer Priorität? Aber wo? Wie? Arghhhh, das macht mich wahnsinnig.
Ali Sajjad
Sehr geehrte Redaktion, ich möchte alle Google Webfonts auf dieser Seite hinzufügen und sie dann in meinen Mitteln verwenden.
aber ich möchte nicht zu viele Links in der Header-Datei verwenden. Gibt es eine andere Möglichkeit?
WPBeginner Support
Fügen Sie nur die Schriftarten hinzu, die Sie verwenden möchten.
Admin
Anurag
Also, ich habe einen Blog (http://www.goingtechy.com/). Das Problem, das ich habe, ist, dass ich die CSS-Auslieferung der Google-Schriftart optimieren möchte, die meine Website bereits verwendet. Die Website hat also bereits Google Fonts. Wie kann ich sie optimieren?
Samantha
Vielen Dank für diesen Beitrag! Für jemanden, der keine formale HTML/CSS-Ausbildung hat, war ich von der Einfachheit dieses Beitrags beeindruckt.
Tanisha
So easy and go it to work perfectly. Thanks for this.
Greg
Hallo,
Mit Genesis und dem Parallax Pro Theme…
Aber ein Neuling bei Dingen wie PHP etc.
Ich habe diesen Code wie von Ihnen angewiesen in die Datei fuctions.php eingefügt:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() { echo ”; }
Die Überschriften, die die obige Schriftart verwenden, bleiben unverändert.
Fragen:
1. Gehe ich richtig in der Annahme, dass der obige Code das Einzige ist, was ich hinzufügen muss?
2. Wo genau sollte der Code hinzugefügt werden – am Anfang oder am Ende von fuctions.php?
2. Fehlt etwas im Code?
3. Sollte ich etwas zur style.css-Datei hinzufügen?
Vielen Dank für Ihre Hilfe
Mit freundlichen Grüßen
Greg
WPBeginner Support
Greg, scheint für uns in Ordnung zu sein. Wir denken, WordPress hat wahrscheinlich den Teil aus Ihrem Code weggelassen, wo Sie den Font-Link ausgegeben haben. Ja, Sie müssen CSS verwenden, um Stilregeln für Selektoren festzulegen, bei denen Sie Ihre Google-Schriftart verwenden möchten.
Admin
Tony Porto
Nichts von dem oben Genannten ist gut genug, wir alle wissen, dass „wp_enqueue_style( ‘google-font’)“ der „technisch korrekte Weg ist, ein Skript aufzurufen, aber in diesem Fall wird Ihr <header so aussehen;
SCHRIFTART 1:
SCHRIFTART 2:
SCHRIFTART 3:
SCHRIFTART 4:
Schlecht, es muss so sein:
Akmal
Wo soll ich den obigen Code einfügen? Ich konnte die letzte Codezeile nirgends in meiner header.php-Datei finden? Können Sie mir bitte Schritt für Schritt erklären?
Danke.
WPBeginner Support
In Ihrer header.php-Datei finden Sie
</head>. Sie können diesen Code überall vor diesem Tag einfügen.Admin
Sarah
Ich habe versucht, Folgendes neu einzugeben, und es ändert sich immer noch nichts;
/* Schriftarten importieren
———————————————————— */
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts () { echo ‘’; }
/* Standardwerte
Es hat beim ersten Mal funktioniert. Ich bin so verwirrt!
Danke für deine Hilfe.
Sarah
Hallo,
Ich war so stolz auf mich, dass ich den Code kopiert und die Schriftart geändert habe, die ich für meine Website zu groß fand. Als ich versuchte, sie in etwas anderes zu ändern, muss ich etwas durcheinander gebracht haben, und es wird immer nur ein Schriftstil angezeigt, selbst wenn ich mit den Codes spiele. Ich fühle mich jetzt wie ein Dummkopf – ich spreche kein Technikchinesisch. Kann mir jemand helfen? Ich habe es mit und ohne die Zahlen gemacht, falls sie nicht wirklich dazugehören. Danke. Das ist das Neueste, was ich eingegeben habe.....
/* Schriftarten importieren
———————————————————— */
1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5); 2 3 function wpb_add_google_fonts() { 4 echo ””; 5 }
/* Standardwerte
———————————————————— */
WPBeginner Support
Wir hoffen, Sie haben die Zahlen nicht mit dem Code eingegeben. Oder doch?
Admin
Sarah
Keine Zahlen, aber diesmal fehlt mir etwas. Das ist genau das, was ich in meiner Tabelle habe;
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() { echo "; }
Sarah
Es scheint, dass der Code funktioniert hat... auf einem Computer. Auf zwei anderen, die ich benutze, hat er nicht funktioniert.
Können Sie bitte vorschlagen, warum das so sein könnte?
Vielen Dank
Karissa Skirmont
Wie kann man mehrere Google Fonts in der functions.php verwenden?
Ich hatte das:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); }Aber das Dancing Script wurde auf meinem zweiten Computer, iPhone oder Tablet nicht angezeigt.
Ich habe Open Sans entfernt und es funktionierte wieder.
WPBeginner Support
@Karissa, das erste Argument in der Funktion wp_enqueue_style ist der Handle für das Stil-Skript, das Sie laden. Versuchen Sie stattdessen diesen Code:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 ); wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 ); }1-click Use in WordPress
Admin
Karissa Skirmont
Egal, ich habe herausgefunden, dass ich einen Link wie diesen verwenden musste:
‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’
Karissa Skirmont
Ah, ich verstehe, ich habe oben geantwortet, bevor ich die Seite aktualisiert und Ihre Antwort gesehen habe.
Durch die Verwendung des Links, den Google anbietet, wenn Sie mehrere Schriftarten ausgewählt haben, wird es so erzeugt und Sie können verschiedene Schriftarten leichter live auf der Website ausprobieren.
Chaitanya
Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support
Long Live WPBeginner…
Prost, Chaitanya
Jenny
Meh, ich benutze gerne den Import. Weniger Arbeit für mich, weil ich faul bin~
pete rome
ja viel zu viel Arbeit bei jeder Methode hier und es sollte keinen Bedarf geben, etwas zum Stylesheet hinzuzufügen, finden Sie ein Plugin
Jimmy Reynolds
A you mean the nerd way
mzilverberg
Etwas, das ich hier übersehen habe, waren die bedingten Kommentare, damit Googles Webfonts in IE8 und darunter funktionieren, wenn Sie mehr als ein Schriftgewicht anfordern. Zum Beispiel:
<link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />Deshalb habe ich eine Funktion zum Laden von Schriften erstellt: https://github.com/mzilverberg/LoadGoogleWebfonts
Mein Skript platziert auch die entsprechenden Fallback-URLs in einem bedingten Kommentar.
Mit ein paar Zeilen Code könnten Sie dies auch in der functions.php Ihres Wordpress-Themes zum Laufen bringen.
Greg
Wie fügt man Google Fonts zur Admin-Seite hinzu?
Redaktion
Warum sollten Sie Google Fonts auf der Admin-Seite hinzufügen?
Admin
Bruce Smith
Um WYSIWYG im Admin-Content-Editor beizubehalten. Damit ich die gleiche Schriftart im Admin-Editor sehe wie auf meiner Website.
Dan Merhar
Ich habe mich tatsächlich gefragt, wie man dasselbe macht (und das ist das erste Ergebnis, das bei Google aufgetaucht ist).
Ich weiß, dass es Plugins gibt, um die Google Webfonts-Funktionalität zum WYSIWYG-Editor hinzuzufügen, aber sie verlangsamen ihn extrem. Ich werde es weiter untersuchen und sehen, ob es eine einfache Möglichkeit gibt, eine oder zwei Schriftarten hinzuzufügen.
Marleen
Vielen Dank fürs Teilen, ich bin wirklich glücklich damit. Ich bin ein Genesis-Nutzer und habe @import verwendet, weil es bereits im Stylesheet gemacht wird. Ich fühle mich mit dieser Lösung viel besser. Frohes neues Jahr 2013!
jeff
Ersetze ich in deinem Code „DEINE THEMEN-STYLESHEET“ durch etwas??
meine ist STYLE.CSS, oder muss es eine URL sein??
danke,
Jeff
Redaktion
Ja, Sie müssen hier den Pfad zur style.css Ihres Themes einfügen.
Admin
Charles
Das ist, was ich benutze.....
Fügen Sie dies zu Ihrer theme_functions.php-Datei hinzu:
/*----------------------------------*/ /* Load CSS Files /*----------------------------------*/ if(!function_exists('load_theme_styles')) { function load_theme_styles() { if (!is_admin()) { $cssURL = get_template_directory_uri().'/css/'; $fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald'; // Registering New Styles wp_register_style('googleFont', $fontURL); wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen'); wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print'); // Enqueing Styles wp_enqueue_style('googleFont'); wp_enqueue_style('style'); wp_enqueue_style('print'); } } } add_action('wp_enqueue_style', 'load_theme_styles');Was halten Sie davon?
Chris Reynolds
Dies ist der KORREKTE Weg, Google Fonts hinzuzufügen. Verwenden Sie immer wp_register_style/wp_enqueue_style
David
Noch besser ist es, einen bedingten Kommentar hinzuzufügen, um die Schriftarten separat für IE 7 und 8 zu laden:
Von hier:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Bryan Nickson
Nette Tutorials. Ich wollte so etwas haben.. Hut ab!!
Peter
Was ist mit der JS-Option, ist das eine schnellere Option Oder ist die eine besser?. Danke
Redaktion
Die Methode in dieser Anleitung ist bei weitem die am meisten empfohlene.
Admin
QLStudio
In Ihrer Antwort reihen Sie das CSS nicht ein – ist das wirklich der beste Weg, es hinzuzufügen?
Chris
Toller Artikel! Ich denke, es wäre ziemlich cool, wenn WordPress standardmäßig Google Fonts integriert hätte, aber das scheint einfach genug zu sein. Danke für die Erklärung!
Redaktion
Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though
Admin
Aaron Crow
Du bist super, Mann! Genau das, wonach ich gesucht habe! Danke für diesen Beitrag… Ich habe ewig gesucht, um etwas darüber zu finden, wie man das zu meinem Theme hinzufügt. Ich bin froh, dass ich auf deine Seite gestoßen bin.
Anderson Curry
Toller Beitrag und auch wenn es ein Plugin gibt, um dies zu tun, ist es immer besser, auch den Weg ohne Plugin zu lernen.
Brad
Sie akzeptieren also offensichtlich nicht die Verwendung der verschiedenen Google-Schriftarten-Plugins. Ich muss in diesem Fall meine CSS-Dateien erneut überprüfen.
sadhu
Ich verstehe den zweiten Teil nicht, nämlich das Hinzufügen von Schriftarten zum Genesis Add Action Ding. Ist das eine weitere Methode, um Google Web Fonts hinzuzufügen?
und ich weiß, wir müssen nicht alle Schriftartenstile einschließen, aber die empfohlene Methode ist http://fonts.googleapis.com/css?family=Lora|Oswald
Nur zum Beispiel, was ist, wenn ich nur den fetten Stil für Lora und den leichten Stil für Oswald möchte, wie kombiniere ich dann die Schriftstile?
danke
Redaktion
Der zweite Teil ist NUR für Genesis-Benutzer. Wenn Sie nicht das Genesis Theme Framework verwenden, dann benötigen Sie diesen Teil nicht. Um Stile wie gewünscht zu kombinieren, gehen Sie wie folgt vor:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
Admin
Anton
Was soll ich tun, wenn ich @font-face im Genesis Framework verwenden möchte, so wie Sie es hier mit den Google Webfonts gezeigt haben, gibt es dafür eine Lösung.
Ich suche schon den ganzen Tag, da meine Schriftarten unglaublich langsam laden!
Viele Grüße
Gautam Doddamani
Tolles Tutorial… ich benutze eigentlich das wp google fonts Plugin… würden Sie dieses Plugin empfehlen oder die manuelle Methode, wie oben beschrieben… welche ist leistungsmäßig effizienter?
Redaktion
Habe dieses Plugin noch nicht ausprobiert. Aber wir versuchen fast immer, Plugins dieser Art zu vermeiden, da es einfacher mit Theme-Dateien gemacht werden kann.
Admin
Gautam Doddamani
sweet…thanks will edit my theme instead of using a plugin
Pippin
Das Google Fonts-Plugin zu vermeiden, nur weil es ein Plugin ist, ist überhaupt kein guter Grund. Die Verwendung des Plugins bietet Ihnen tatsächlich viel mehr Flexibilität, als es in Ihr Theme einzubinden, insbesondere wenn Sie sich jemals für ein anderes Theme entscheiden.
Redaktion
Meiner Meinung nach werden Schriftarten in den meisten Fällen als stilistische Elemente betrachtet, die themenabhängig sind und sich normalerweise ändern, wenn Sie zu einem anderen Thema wechseln.
Siddanth Adiga
Hervorragender Beitrag, ich habe genau das gesucht, ich habe mich mit CSS und Fontface versucht. Ich werde das hier auch ausprobieren, danke
Konstantin Kovshenin
The “Right” way would be to use the wp_enqueue_style function
Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/
Redaktion
Konstantin, ich stimme dir vollkommen zu. Die Funktion wp_enqueue_style sollte immer verwendet werden. Das habe ich zuerst versucht, wie von Nathan Rice in StudioPress' Artikel über Google Fonts vorgeschlagen. Außer Google gibt eindeutig an, dass die Schriftarten vor allem anderen geladen werden sollten. Mit wp_enqueue_style und dann dem Drucken mit wp_print_styles wurde der Eintrag nach dem Laden des Haupt-Stylesheets gedruckt. Das war der Grund, warum ich mich in den genesis_meta() Hook einhängen musste. Jedenfalls stimme ich deinen Gedanken in deinem Artikel vollkommen zu.
Admin
Japh
I’m a little late to this, but I wanted to mention that you could still use
wp_enqueue_style, just set the priority higher so that they are loaded firstBob R
Tolles Tutorial. Eine Beobachtung jedoch: Das erste Bild im Artikel sollte den @import-Tab zeigen, oder?
Redaktion
Nein, das sollte nicht angezeigt werden.
Admin