Lust auf mehr als Systemschrift? Mit den Google-Webfonts ist das ganz einfach gemacht - auch auf einer jimdo-Site.
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.
- Ganz oben in der Head-Datei die Einbindung der Webfonts initiieren.
- 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.
- Nächster Artikel: Erfolgreiche Projekte
- Vorheriger Artikel: Font-Veränderungen
- Kategorie: janosch007, jimdo
Kommentar schreiben
Juicer Reviews (Donnerstag, 18 April 2013 01:12)
This post was just what I was searching for!
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.
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?
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).
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
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
Robert (Sonntag, 28 Januar 2018 14:20)
Hej Judith, danke für deine Hilfe...
ich habe deinen Text kopiert und meine Schrift ersetzt aber es funtzt nicht,... was mache ich falsch...
sieht also so aus:
<link href='http://fonts.googleapis.com/css?family=butterfly+kids:300'
rel='stylesheet' type='text/css' />
<style type="text/css">
/*<![CDATA[*/
body, p, table, td, h1, h2, h3 {
font-family: "butterfly kids",sans-serif!important;
}
/*]]>*/
</style>
Judith (Montag, 29 Januar 2018 11:27)
Hallo Robert,
so weit ich das sehen kann, bietet Google die von Dir spezifizierte Schrift nicht an.
Da diese Schrift dort bei Google so nicht angeboten wird, kannst Du sie also auch nicht nutzen.
Du musst also eine passende Quelle für Deinen Webfont suchen.
Judith
Denise (Donnerstag, 12 April 2018 18:17)
Hallo Judith,
gerne würde ich eine webfont in die Seite integrieren die leider nicht in google fonts verfügbar ist. Gibt es eine Möglichkeit?
Lieben Dank
Mario (Donnerstag, 06 September 2018 10:37)
Hallo Judith,
gerne würde ich eine webfont von myfonts.com in die Seite integrieren, aber leider gibt es da nicht wie bei googlefonts einen Linke, den ich einfach in den Header von jimdo packen kann. Gibt es eine andere Möglichkeit?
Lieben Dank
Walti S. (Donnerstag, 20 September 2018 14:37)
Danke für all die Hinweise, die ich hier gesehen habe.
Und so macht man es wirklich :-) : https://expanding.jimdo.com/hacks/use-custom-fonts/