Google Webfonts Integration ohne Plugin – inklusive meiner Lieblingsfonts

google-webfonts

Was sind Google Webfonts

Aktuell (Stand April 2015) gibt es im Fontarchiv der Google Webfonts 676 Schriften, die ihr kostenlos in eure Webseite einbinden könnt. Und das ganze in Rekordzeit: Das Einbinden dauert keine 5 Minuten. Damit könnt ihr euer Schriftbild aufpeppen und eurer Seite einen individuellen Touch verleihen.

3 schnelle Wege zur Integration der Google Webfonts auf euren Blog

  1. Variante 1 - Integration der Google Webfonts per Plugin Es gibt diverse Plugins f√ľr die Integration von Google Webfonts. Dabei ist es eigentlich ganz einfach, Google Webfonts in euren WordPress-Blog zu integrieren. Zum Testen der Google Fonts ist das Plugin WP Google Fonts perfekt. ¬†Per Klick w√§hlt man die Schriftart aus, setzt einen¬†Haken f√ľr welche Tags die Schriftart verwendet werden soll, und fertig ist das Ganze. Allerdings bl√§ht das Plugin den Quellcode im Header etwas auf, da unter anderem die CSS direkt im Header codiert werden.
  2. Variante 2 - Integration der Google Webfonts im Template √ľber die header.php (my Favorite) Ich¬†empfehle, die Google Webfonts direkt im Theme bzw. Childtheme zu verankern:¬†1 Minute Arbeit, und euer Blog hat ein weiteres Plugin weniger. Die Anleitung seht ihr gleich im n√§chsten Punkt.
  3. Variante 3 -¬†¬†Integration der Google Webfonts im Template √ľber die Functions.php Es gibt noch weitere M√∂glichkeiten, Google Webfonts einzubinden. Elmastudio bietet eine tolle M√∂glichkeit an, das auch √ľber die functions.php zu machen: www.elmastudio.de/wordpress/google-webfonts-in-wordpress-einbinden-so-funktionierts

So schnell bekommt ihr die schicken Google Webfonts in euer Template - ganz ohne Plugin:

Google-Schrift aussuchen

google_webfonts

  1. Sucht euch auf¬†www.google.com/fonts¬†die Schrift eurer Wahl aus. Links habt ihr ein Filtermen√ľ, mit dem ihr Kriterien festlegen k√∂nnt, die eure Suche einschr√§nken. Dort k√∂nnt ihr gezielt nach Handschriften oder plakativen Displayschriften w√§hlen.
  2. Setzt oben im Textfeld "preview text" euren Text ein - damit könnt ihr direkt bewerten, wie beispielsweise euer Logotext aussieht und ob euer Text auch gut lesbar ist
  3. Bei jeder Font seht ihr gleich, wie viele Stile (fett, fetter, kursiv, normal) zur Verf√ľgung stehen. Es gibt viele Schriften mit nur einem Style - dann gibt es allerdings keine Unterscheidung, zwischen fetter, kursiver und normaler Schrift - √ľberlegt euch daher schon vorher, wie flexibel ihr die Schrift einsetzen m√∂chtet.
  4. Per Klick auf das kleine Icon mit dem Pfeil bei jeder Schrift kommt ihr zur Integrationsanleitung

Integrationsanleitung: Google-Schrift im Template einbauen

googlefonts_1 W√§hlt zuerst die Styles, die ihr importieren m√∂chtet. Jeder Style kostet ¬†Ladezeit - seid daher sparsam :-) googlefonts_2 Hier legt ihr die Schriftzeichen fest¬†- f√ľr den Einsatz im deutschsprachigen Raum reicht meist ein Haken bei "Latin" googlefonts_3 Darunter seht ihr den Code, der in eure Header.php im Bereich zwischen <head> und </head>gesetzt werden ¬†muss. (Hier geht es zum Beitrag, wie ihr f√ľr eure¬†Themes ein Childtheme vobereitet) googlefonts_4
Das ist der Code f√ľr eure CSS. F√ľgt diesen jeder Klasse und jedem Element ¬†hinzu, die diese Schrift besitzen soll. Hier ein paar Beispiele:

h1 {font-family: 'dein font code';} /* Alle √úberschriften 1 */
h1, h2, h3 {font-family: 'dein font code';} /* Alle √úberschriften 1-3 */
.content-area h1 {font-family: 'dein font code';} /* Beispiel Twenty Fifteen Theme - Alle √úberschriften 1 in der Spalte mit den Contentboxen */
#sidebar h2 {font-family: 'dein font code';} /* Beispiel Theme Affiliseo: Alle √úberschriften in der Sidebar */

Danach könnt ihr eure neuen Fonts auf eurer Seite bewundern. Es macht irre viel Spaß, die Webfonts auszuprobieren.

F√ľr den Fall, dass das eure Webfonts nicht auf eurer Seite angezeigt werden: N√§chste Woche gibt es einen Beitrag zum Theme CSS - wie ihr die richtige Klasse findet und diese selbst √ľberschreiben k√∂nnt. Schaut einfach dann nochmal vorbei.

Meine Google-Webfonts- Favoriten

Open Sans

Open Sans ist der Klassiker schlechthin. Interessant sind hier vor allem die vielen Schriftschnitte von extrem Fett zu extrem d√ľnn. Dieser Schriftschnitt kommt beispielsweise bei meinem Easy-WP-Query Generator zum Einsatz: open-sans

Nothing you could do

Eine meiner Lieblingsschreibschriften, weil sie wirklich wie handgeschrieben aussieht. Hier am Beispiel von www.grafiktabletts-digitalstifte-und-zubehoer.de nothing

Lobster

Yeah - Retro ist in. Und mehr Retro als bei der Google Font Lobster geht schon kaum. Hier ein livebeispiel von www.kochen-nach-optik.de. lobster

Frederika the Great

Diese Schrift ist einfach nur coooooooool - eigentlich h√§tte ich diese gerne auf der Ideenlounge - allerdings eignet sie sich nur f√ľr kurze √úberschriften. frederika

Playfair

Serifenschriften sind wieder in! Playfair ist klasse aufgrund der vielen Schriftschnitte. Playfair-Display Meine Favoriten ändern sich ständig - den es kommen immer wieder neue Fonts dazu. Ich denke, dass ich bald einen separaten Beitrag schreibe, in dem ich eine Liste nach Typus vorstellen werde. Bis dahin - viel Spaß in der fantastischen Welt der Webfonts!

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich √ľber die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufh√ľbschen k√∂nnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    N√ľtzliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergr√ľnde, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder sto√üe ich auf interessante Blogs, Webseiten oder B√ľcher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    N√ľtzliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed