Google Webfonts Integration ohne Plugin – inklusive meiner Lieblingsfonts

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. [box_dunkel ]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.[/box_dunkel]

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!

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

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.
  • 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)
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz