Webfonts in jimdo-Site einbauen

Lust auf mehr als Systemschrift? Mit den Google-Webfonts ist das ganz einfach gemacht - auch auf einer jimdo-Site.

Screenshot: andresen.de in "Open Sans"
Screenshot "andresen.de"

Google bietet unter http://www.google.com/webfonts Webfonts an. Einfach den Font aussuchen und die passenden Zeilen in die Head-Informationen der jimdo-Administration einfügen: Adminstration / Einstellungen / Head bearbeiten.

 

  1. Ganz oben in der Head-Datei die Einbindung der Webfonts initiieren.
  2. Darunter die Schrift im CSS für die entsprechenden Tags deklarieren.

 

Im konkreten Fall wird "Open Sans" in die Site eingebunden:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' 
rel='stylesheet' type='text/css' /> <style type="text/css"> /*<![CDATA[*/ body, p, table, td, h1, h2, h3 { font-family: "Open Sans",sans-serif!important; } /*]]>*/ </style>

Diese Deklaration sorgt dafür, dass auch die mobile Version von jimdo mit diesem Schriftfont ausgestattet ist. Wer darüber hinaus gehende Änderungen am jimdo-Layout in der mobilen Version vornehmen möchte, sollte Farbliche Änderungen des Mobile View lesen.

 

Dieser Blog-Post ist ein privater Beitrag von Judith Andresen.


Kommentar schreiben

Kommentare: 6
  • #1

    Juicer Reviews (Donnerstag, 18 April 2013 01:12)

    This post was just what I was searching for!

  • #2

    grundschule-niederkirchen (Samstag, 04 Mai 2013 13:03)

    Ich hatte gehofft, diese lÖsung würde auch den IE zu einer ordentlichen darstellung bewegen, aber leider mal wieder nicht.

  • #3

    Bruce H (Montag, 23 Juni 2014 22:22)

    Wie kann man den style denn lediglich nur für die überschrift ein anpassen ohne, dass der normale text mit einbezogen wird?

  • #4

    Judith Andresen (Montag, 23 Juni 2014 22:29)

    In der obigen Deklaration werden fast alle Text-Stile angepasst. Du musst diese Deklaration auf die Überschriften eingrenzen:
    h1, h2, h3 {
    font-family: "Open Sans",sans-serif!important;
    }
    ändert nur die große Überschrift (h1), die mittelgroße Überschrift (h2) und die kleine Überschrift (h3).

  • #5

    oevmmobil (Freitag, 21 November 2014 03:36)

    Hallo Judith,
    ich danke dir für deine Tipps und Tricks, allerdings habe ich das Problem, dass ich mein eigenes Hintergrundmotiv in der Mobilen Version nicht sehen kann.
    Das heißt egal was ich mache mir wird das Design von Jimdo vor die Nase geschoben. Wie kann ich dies umgehen??
    Danke im vorraus

  • #6

    Judith Andresen (Freitag, 21 November 2014 07:58)

    Hallo,

    ich keine Dein Theme nicht genau. Im Prinzip gehe ich davon aus, dass Du im CSS des mobile view die Hintergrundgrafik verändern kannst.

    Bitte wende Dich an den Support von jimdo, um das genau zu klären.

    Judith