Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

So bindest du Google Web Fonts in deine WordPress Seite ein

In dem Artikel möchte ich dir Google Fonts vorstellen und erklären, wie du diese in wenigen Schritten in deine WordPress Seite oder deinen Blog integrieren kannst.

Alle Schriftarten (übrigens über 600!) bei Google Fonts können kostenlos genutzt werden und sind alle samt sogenannte Web Fonts. Das heißt diese können innerhalb deiner Webseite genutzt und auch von anderen Benutzern gesehen werden, ohne dass du z.B. die Überschriften als Bild generieren musst (wie es früher der Fall war, wenn man Schriftarten jenseits von Arial, Verdana, oder Comic Sans nutzen wollte).

Wir haben hier übrigens die 20 beliebtesten Google Web Fonts aufgelistet / dargestellt.

 

Wie binde ich Google Web Fonts in WordPress ein?

Um eine Web Font in deinem Blog einzubinden gibt es meisten 2 Sachen, auf die du achten musst: Zum einen das eigentliche Einbinden der Schriftart und dann noch die CSS-Anpassung der verschiedenen Elemente. Aber eins nach dem Anderen. Fangen wir erstmal an und nehmen wir zum Beispiel Open Sans von Google Web Fonts.

http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

Rufst du die Seite auf, bist du bereits mitten im Geschehen. Aber keine Sorge, wir gehen alles Step für Step durch, sodass hoffentlich keine Fragen am Ende übrig bleiben. Falls doch dann einfach nur ein Kommentar hinterlassen. Wir sehen nun also die folgenden Punkte.

1. Choose the styles you want:

google-fonts-page-loadHier musst du zunächst die verschiedenen Stile wählen, die du in deinem Blog verwenden möchtest. Je nach Font gibt es viele verschiedene Stile wie Light, Regular, Semi-Bold, Bold oder Extrabold und das Ganze oftmals auch mit Italic gemischt. Als Beispiel selektiere ich Normal, Semi Bold und Bold. Wie du siehst wird, während du die Stile auswählst, an der rechten Seite die Page Load Anzeige immer höher. Das heißt je mehr Stile du verwendest, desto länger lädt deine Seite. Da wir ja vor kurzem gelernt haben, dass die Page Speed Optimierung wichtig ist, solltest du nur die Stärken der Fonts auswählen, die du später auch wirklich in deinem Blog benötigst.

2. Choose the character sets you want:

Scrollst du ein wenig nach unten findest du den Punkt. Diesen kannst du eigentlich so lassen, solange du keinen klingonisch Blog führst. :P

3. Add this code to your website:

Noch ein bisschen weiter unten kommt dann der interessante Part. Hier stehen dir 3 Möglichkeiten zur Verfügung, wie du die Webfont in deine Seite einbinden kannst. Ich empfehle es hier bei „Standard“ zu belassen. Innerhalb des Tabs findest du nun folgenden Code.

[html] <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css" />[/html]

Diese Zeile musst du nun unter Design » Editor und dort bei Kopfzeile (header.php) einbinden. Am besten innerhalb des <head>-Tags. Zum Beispiel vor/nach <?php wp_head(); ?>.

4. Integrate the fonts into your CSS:

Nachdem die eigentliche Font nun in deine Seite integriert ist, musst du nun noch festlegen welche Elemente deine Seite diese Font benutzen. Du findest unter 4.  folgenden Code.

[css]font-family: ‚Open Sans‘, sans-serif;[/css]

Diesen musst du nun in deiner style.css, ebenfalls unter Design » Editor, einem oder mehreren Elementen zuweisen. Du kannst natürlich auch mehrere Schriftarten in WordPress benutzen. Zum Beispiel möchtest du die komplette Schriftart deiner Seite auf Open Sans ändern, dann muss der oben genannte CSS-Style auf den body angewendet werden. Das sieht dann so aus:

[css]body {font-family: ‚Open Sans‘, sans-serif;}[/css]

..bzw. wenn du noch weitere Parameter wie Farbe und Schriftgröße hast so:

[css]body {font-family: ‚Open Sans‘, sans-serif;font-size:14px;color:#666}[/css]

Oder wenn nur die Überschriften diese Schriftart haben sollen dann wäre es dieses Beispiel:

[css]h1, h2, h3, h4, h5, h6 {font-family: ‚Open Sans‘, sans-serif;font-size:24px;color:#2C699F}[/css]

 

Das war es dann auch schon. Wenn du noch Fragen hast einfach ein Kommentar hinterlassen.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

10 Kommentare

Avatar von Tina

Tina 12. Oktober 2013 um 23:00

Hallo André,

danke für deine super Infos! Ich brauche aber bitte noch ein wenig Hilfe – ich stehe gaaanz am Anfang und scheitere an Punkt 4.: Um die fonts im css zu integrieren, wo soll ich den code hinkopieren und was soll ich löschen oder beibehalten?
So steht es im Editor:
<body >
Das ist die Schrift die ich integrieren möchte:
font-family: ‚Lato‘, sans-serif; font-size:14px;color:#b6d642}
Wie sollte die Zeile richtig aussehen?

Vielleicht kannst du mir auch gleich noch sagen,
– wie ich unter der Kontakt-Seite die Kontaktdaten zusammenrücke, so dass der Zeilenabstand nicht so groß ist? UND
– wie ich den Hinweis auf den Ablage-Ort wegbekommen: Der wird auf manchen Seiten angegeben, auf anderen nicht: KATEGORIE-ARCHIV: KONTAKT

1000 x DANKE für deine Antworten!
tina

Antworten
Avatar von André Köbel

André Köbel 13. Oktober 2013 um 13:24

Hallo Tina,

also der CSS Code unter Punkt 4 kommt in die style.css. Die findest du unter Design » Editor. Dort muss dann folgendes rein:

body {
    font-family: 'Lato', sans-serif; font-size:14px;color:#b6d642}
}

Zu deiner anderen Frage: Du machst jedes mal einen Umbruch nach den Daten, somit haben die einzelnen Zeilen zu viel Abstand. Entwerder du entfernst die Leerzeilen in dem TEXT-Editor (nicht visuell) oder beim Umbruch, nach „UG (haftungsbeschränkt)“ z.B. drückst du Enter und hälst währenddessen die Shift-Taste gedrückt. Dann kommt dieser Umbruch nicht.

Und zu der letzten Frage: Du musst das Impressum als Seite anlegen, dann kommt dieser Hinweis auch nicht. Kategorien sind nur für den Blog, also die eigentlichen Artikel gedacht, daher kommt dann später auch nur dort die Überschrift.

Hoffe ich konnte dir ein wenig weiterhelfen.

Gruß
André

Antworten
Avatar von Katja

Katja 9. Januar 2014 um 15:51

Hallo,

ich weiß jetzt nicht, ob ich hier mit meiner Frage richtig bin, aber ich hätte auch noch eine zu dem Thema „Schriften in WP einbinden“.

Ich habe jetzt bei „Design“ > „Editor“ die Schrift „Happy Monkey“, wie oben beschrieben hinter und vor dem letzten , eingefügt.

WIE kann ich nun die Schrift auf meiner Webseite aktivieren? Das ist die große Frage.
Nach wie vor zeigt es auf meiner HOME etc. Seiten die normale ARIAL Schrift an (die ich mit dem Plugin „UseAnyFont“ aktiviert hatte). Muss ich dieses Plugin deaktivieren oder muss ich irgend etwas anderes anklicken, markieren etc.?

Ich kenne mich leider noch nicht wirklich mit WP aus, bin also gerade etwas ratlos… :-)

Herzlichen Dank schonmal für Hilfe!

Katja

p. s. Eine weitere Frage, die ich noch zu der Schrift „Happy Monkey“ hätte:
Stimmt es, dass, wenn andere Nutzer, die auf meine Seite klicken, diese Schrift nicht installiert haben, diese gar nicht sehen? Sehen diese Nutzer dann wieder die ARIAL Schrift oder die Standard WP Schrift?
Wenn das nämlich so ist, dann lohnt es sich ja eigentlich nicht, die „Happy Monkey“ zu installieren, weil ich nicht glaube, dass irgend jemand die Schrift überhaupt installiert hat..
…sorry, ich habe wirklich keine Ahnung! ;-)
Danke!

Antworten
Avatar von André Köbel

André Köbel 9. Januar 2014 um 22:20

Hallo Katja,

du hast also
[html]<link href=’http://fonts.googleapis.com/css?family=Happy+Monkey‘ rel=’stylesheet‘ type=’text/css‘>[/html] bereits in deine header.php implementiert, ja? Wie meinst du das, dass du die an 2 Stellen eingefügt hast? Im Artikel meine ich mit vor/nach nicht sowohl als auch, sondern nur vor ODER nach < ?php wp_head(); ?>. :D Aber nicht schlimm, einfach einmal diese Zeile entfernen.

Als nächstes musst du noch per CSS definieren, welche Elemente die Schrift bekommen sollen. Entweder die komplette Schrift auf der Seite, dann musst du folgendes an die Ende der style.css (Design » Editor) einfügen:

[css]body {font-family: ‚Happy Monkey‘, cursive;}[/css]

..oder aber willst du nur die Überschriften in diesem Stil gesetzt haben, dann musst du folgendes in die style.css setzen (ebenfalls am Ende)

[css]h1, h2, h3, h4, h5, h6 {font-family: ‚Happy Monkey‘, cursive;}[/css]

Vielleicht solltest du dir für so etwas erstmal ein paar HTML und CSS Grundlagen anlesen, damit du ein wenig in die Materie reinkommst. Denn die Ausgabe von WordPress ist letztendlich nicht mehr als HTML/CSS, welches du anpassen kannst / musst. Jegliche Funktionen etc., welche per PHP realisiert werden, solltest du dir aber für später aufheben. ;)

Früher war es so, dass man im Internet Schriften über 3 Wege benutzen konnte.

1. Man erstellt ein Bild aus der Schrift (z.B. mit PHP), sodass natürlich jeder User das Bild angezeigt bekommt und dementsprechend die „Schrift“ sieht.
2. Das Ganze wie oben aber mit Flash, statt einem Bild
3. Man konnte Schriftarten definieren, die aber dann nur bei denjenigen angezeigt wurden, die diese auch auf dem PC haben, richtig.

Aber all das war einmal. Mittlerweile kannst du jegliche Schriftarten im Internet benutzen. Diese müssen lediglich Webfont fähig sein, oder vorher in eine Webfont konvertiert werden. Aber dann werden diese Schriften auch bei jedem Benutzer so angezeigt. Zumindest bei denen, die einen relativ modernen Browser haben, der die CSS3 Funktion „font-face“ unterstützt.

Antworten
Avatar von Katja

Katja 10. Januar 2014 um 10:06

Hallo André,

vielen herzlichen Dank für die Hilfe!! :-)

Ich hatte mich falsch ausgedrückt bzw. das Kopierte aus WP hat es hier nicht übernommen. Den Link habe ich nur einmal eingefügt, das Ganze sieht so aus:

Ich probiere das jetzt mal mit BEIDEM (also komplette Schrift + Überschrift), wenn das geht?!?
Also ich muss das genau SO eingeben (ohne die 1|), oder?

body {font-family: ‚Happy Monkey‘, cursive;}

Viele Grüße und DANKE!!!
Katja
p. s. Die Schrift „Happy Monkey“ ist ja wirklich komplett frei, also auch kommerziell, nicht wahr? :-)

Antworten
Avatar von Katja

Katja 10. Januar 2014 um 10:07

…ups, ich sehe gerade, dass das Kopierte hier gar nicht übernommen wird.. ;-)

Antworten
Avatar von Katja

Katja 10. Januar 2014 um 10:23

Juhu, ich hab’s dank deiner Hilfe jetzt tatsächlich geschafft,
die Menüschrift und die Überschrift in der Happy Monkey angezeigt zu bekommen.

Nur der Text an sich, der wird in der ARIAL (vom Plugin UseAnyFont) angezeigt. Wenn ich statt ARIAL auf „Schriftname“ klicke, wird das ganze in der üblichen WP Times New Roman (oder wie sie heißt) angezeigt. Leider kein Happy Monkey.

Ich habe den Code

body {font-family: 'Happy Monkey', cursive;}

ganz ans Ende bei „Stylesheet (style.css)“ eingegeben, also hinter dem allerletzten {

Wie schaffe ich das nun, dass auch der TEXT an sich in Happy Monkey angezeigt wird? Muss ich UseAnyFont deaktivieren? Oder muss ich den Code noch irgendwo eingeben?

Vielen Dank nochmal im Voraus :-)

Antworten
Avatar von André Köbel

André Köbel 11. Januar 2014 um 12:58

Du musst wegen den Anführungszeichen aufpassen, hast du oder ' verwendet?

Und ja, die Fonts von Google sind alle komplett kommerziell nutzbar. :)

Antworten
Avatar von Dagmar

Dagmar 22. Januar 2015 um 15:59

Hallo André, danke für die Hilfestellungen. Ich hab dennoch ein Problem: Meine Google Font erscheint nicht auf meiner WP Seite.
Ich kapier das nicht mit der CSS-Sache. Wo genau füge ich das font-family: ‚open sans‘ ein?
Wäre super , wen du mir hier helfen könntest!
Danke Dagmar

Antworten
Avatar von Christian

Christian 23. Januar 2015 um 9:36

Hi Dagmar,

kommt drauf an wofür du die neue Schriftart nutzen will. Wenn es für ALLES (Überschriften, Laufschrift, usw.) sein soll, dann so:

body{font-family:'Open Sans'!important;}

Das setzt aber vorraus das dein Theme dies nicht wieder in der CSS überschreibt.

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*