Di

18

Okt

2011

Design-Tipp: individuelle Schriftart im Titelbild

Ihr möchtet eure Webseite ein wenig verschönern, wisst aber nicht wie? Ihr findet eure Schriftart langweilig? Nichts leichter als das! Mit Hilfe von Google Webfonts könnt ihr die Schrift im Titelbild individueller gestalten. Und wie das genau geht, zeigen wir euch in dieser Design-Anleitung!

1. Geht auf http://www.google.com/webfonts und wichtig: lasst diese Webseite während des gesamten Vorgangs offen.


2. Wählt eine Schriftart eurer Wahl.

 

 

3. Mit einem Klick auf „Quick-use“ gelangt ihr in den Einstellungsbereich. Hier könnt ihr je nach Schriftart unterschiedliche Schnitte (Kursiv, Bold, Medium, etc.) auswählen. 

 

 

4. Unter Schritt 3 dieser Seite findet ihr einen Code-Schnipsel mit der von euch ausgewählten Schriftart abgebildet.


5. Kopiert diese Zeile und fügt sie auf eurer Jimdo-Webseite in den Head ein. Geht hierzu in der Bearbeitungsleiste auf der rechten Seite auf den Bereich 'Einstellungen'. Dort findet ihr unter 'Webseite' das Symbol 'Head bearbeiten'.

 

 

 

6. Für einen letzten Schritt geht ihr zurück auf die Google Webfonts-Seite. Unter Schritt 4 steht der CSS-Befehl mit dem zu benutzenden Font. Diesen Befehl kopieren und im Head-Bereich weiter bearbeiten.

 

 

7. Um den Titel eurer Webseite zu ändern, benötigt ihr den dazugehörigen Selektor. In diesem Fall: #emotion-header-title.


8. Jetzt könnt ihr das dazugehörige CSS kombinieren und erhaltet folgenden Code:

<style type="text/css">

    #emotion-header-title {
           font-family: 'Poller One', cursive !important;
    }

</style>

 

 

9. Wichtig ist hier das !important am Ende der Zeile. Ohne diesen Befehl wird die Schriftart von den Webseiteneinstellungen überschrieben und nicht für euren Header übernommen.


10. Jetzt nur noch auf 'speichern' klicken und eure Jimdo-Seite neu laden.

 

11. Tipp: Mit Hilfe von Google Webfonts und CSS könnt ihr Schriftarten beliebig erweitern und auch Überschriften, Texte oder Links anpassen!


12. Und so kann ein Ergebnis aussehen:

 

Kommentar schreiben

Kommentare: 81
  • #1

    deutschland-politik (Dienstag, 18 Oktober 2011 15:58)

    Hallo

  • #2

    Animal Crossing Community (Dienstag, 18 Oktober 2011 16:23)

    Ich find es sieht toll aus ;-)

  • #3

    pokemon-kuier (Dienstag, 18 Oktober 2011 16:24)

    Nicht sehr wichtig. Ihr solltet lieber daran Arbeiten, dass man sich auch in Browsern von Spielekonsolen, wie z.B. der Nintendo 3DS einloggen kann und z.B. Texte bearbeiten kann.

    mfg

    Pokemon-Kuier Team

  • #4

    MonoKulturOst (Dienstag, 18 Oktober 2011 16:29)

    Dann lieber doch schnell nen vernüftigen Banner in Photoshop zusammenbasteln ;)

  • #5

    TAFELFARBEN.DE (Dienstag, 18 Oktober 2011 16:34)

    Auch schön ;-)

  • #6

    Robert (Dienstag, 18 Oktober 2011 16:46)

    Wollt ihr nicht mal Webfonts fest ins Tool einbauen?

  • #7

    Pixelpueblo (Dienstag, 18 Oktober 2011 17:42)

    Ich finde, dass ist eine nette Idee. Ich befürchte aber, dass es die Ladezeiten meiner Site verlangsamt. Außerdem mag ich meine "Georgia". Zeitlos und sehr elegant!

  • #8

    stadtpaparazzi (Dienstag, 18 Oktober 2011 18:29)

    Nette Idee, mehr nicht. Gab schon interessantere Infos.

  • #9

    fliesenwerker1 (Dienstag, 18 Oktober 2011 18:32)

    Das haut mich jetzt nicht um...

  • #10

    backflipbmx (Dienstag, 18 Oktober 2011 18:42)

    neee echt nicht...

  • #11

    Gasthof-Pension Entenmühle Urlaub im Naturpark Fichtelgebirge (Dienstag, 18 Oktober 2011 19:29)

    Alles irgendwie zu kompliziert, lass ma so wie's is :) einfacher.

  • #12

    Peter Rehberg (Dienstag, 18 Oktober 2011 19:33)

    nun ja

  • #13

    Thomas (Dienstag, 18 Oktober 2011 19:33)

    Geht das auch, dass man seine eigene, gekaufte Typographie hochladen und benutzen kann? Würde mich interessieren!

  • #14

    marians-sportmagazin (Dienstag, 18 Oktober 2011 20:06)

    Als Vorschlag: Ich würde gerne meine Webseite auch auf Mobilen-Endgeräten (iPhone, Galaxy S2...) bearbeiten, also wie wär's mit einer mobilen Bearbeitungs-Page?

  • #15

    Alexander & Thomas (Dienstag, 18 Oktober 2011 20:35)

    Toller Tipp!!

  • #16

    Olaf Timm Urlaub im schönen Frankenland und Bayern (Dienstag, 18 Oktober 2011 20:41)

    Danke für den Tipp. 10 Schritte für eine neue individuelle Schriftart im Titelbild, ist das mit einem Klick auch zu haben? Oder doch nur was für Profis!?

  • #17

    gerwies Radtouren Berlin (Dienstag, 18 Oktober 2011 20:53)

    Nee, ist nichts für mich.
    Lässt sich mit normalen Bildbearbeitungs- und Grafikprogrammen
    mit Texteingabe viel leichter und noch schicker machen.

  • #18

    Schuhmacherei Baumbach (Dienstag, 18 Oktober 2011 21:19)

    Funktioniert das nur mit Chrome oder auch mit anderen Browsern? Auf jeden Fall dickes Lob, habe mir schon (anstrengender und kostenpflichtig) anders beholfen und werde jetzt auf diese Lösung umsteigen.
    Mit Photoshop und anderen Bildbearbeitungsprogrammen gehts zwar schicker und schöner,auch mit mehr Effekten, aber der Text wird dann von Suchprogrammen nicht mehr gelesen sondern als Bild interpretiert, solltete Ihr bei der Info mal erklären.
    Und dnake für die Anleitung für Dummies, das könnte sogar ich hinkriegen ;-)

  • #19

    sv-friedrichweiler (Dienstag, 18 Oktober 2011 22:30)

    OK, aber für uns nicht so wichtig
    LG
    aus dem SAARLAND

  • #20

    bysitfotographie (Mittwoch, 19 Oktober 2011 08:35)

    Sicherlich gut gemeint - bleibe bei meinem Header. :)

  • #21

    Thomas Runkel (Mittwoch, 19 Oktober 2011 08:39)

    Naja, etwas zu aufwendig !
    Eine Auswahl an Schriftfonts innerhalb des Bearbeitungstools
    im Textbereich wäre wohl besser. Trotzdem Danke!

  • #22

    Anita Klaffenböck (Mittwoch, 19 Oktober 2011 10:30)

    Mir ist das alles viel zu umständlich. Ich hätte auch lieber eine kleine Auswahl an Schriftarten und Größen innerhalb des Bearbeitungstools. Wäre für Anfänger wie mich die bessere Lösung.

    Danke für die Info´s.

  • #23

    geertwilders-supporters (Mittwoch, 19 Oktober 2011 13:29)

    tolle sache!

  • #24

    Wolf (Mittwoch, 19 Oktober 2011 14:22)

    Gäähn... Viel zu umständlich und eh nur für den Header. Besser wären mehr Schriftarten direkt als Tool.

  • #25

    jopri (Mittwoch, 19 Oktober 2011 14:39)

    unwichtig bis nutzlos. :-(

  • #26

    DODO (Mittwoch, 19 Oktober 2011 14:55)

    Toll! Aber es würde "noch" besser sein, wenn man diese schriftarten auf der ganzen seite verwenden könnte! ;)

  • #27

    Alexander - Edelstahlschrauben & Sortimente (Mittwoch, 19 Oktober 2011 14:56)

    Werde es eventuell mal ausprobieren.
    Ich wette, eine vernünftige SUCHFUNKTION für jimdo Seiten wird mehr Begeisterung auslösen... ;)

  • #28

    André und Franziska (Donnerstag, 20 Oktober 2011 03:46)

    Wieso baut ihr solche Sachen nicht direkt im Jimdo Bearbeitungstool ein. Viel zu umständlich immer diese Sachen über andere Anbieter. Das erwarte ich wirklich auch viel mehr von euch!?!?!?!?

  • #29

    amerika2011 (Donnerstag, 20 Oktober 2011 06:58)

    es gab schon mal wichtigers + besseres.

  • #30

    Martin Michalek (Donnerstag, 20 Oktober 2011 13:30)

    mehr Schriftarten direkt im Tool wären auf jeden Fall hilfreicher - und deutlich zu ümständlich!

  • #31

    jentsch (Donnerstag, 20 Oktober 2011 15:15)

    Leute geht mal auf cooltext.com. dort macht ihr ganz einfach eigene Logos und hunderte cooler schriftarten selber und kostenlos...

  • #32

    pixelblog (Donnerstag, 20 Oktober 2011 15:24)

    Cool ;) find ich gut.

  • #33

    docfreedee (Donnerstag, 20 Oktober 2011 17:27)

    Wer sich etwas auskennt, hätte das wohl eh hinbekommen oder Photoshop bemüht. Dann lieber generell für die gesamte Seite die Möglichkeit der Einbindung von Webfonts oder mal was wirklich Gehaltvolles, wie z.B. die Möglichkeit, einen HTML-Newsletter zu erstellen!!!

  • #34

    Bistro Bar Schlüssel (Donnerstag, 20 Oktober 2011 18:53)

    Wer sich etwas auskennt, hätte das wohl eh hinbekommen oder Photoshop bemüht. Dann lieber generell für die gesamte Seite die Möglichkeit der Einbindung von Webfonts oder mal was wirklich Gehaltvolles, wie z.B. die Möglichkeit, einen HTML-Newsletter zu erstellen!!!

  • #35

    Travelmaus Anni (Freitag, 21 Oktober 2011 09:27)

    Mit Spannung erwarte ich immer wieder mal neue Bearbeitungsmöglichkeiten. Aber diesmal ist der Aufwand für eine individuelle Schriftart für mich zu groß. Trotzdem Danke für all die anderen bisherigen Möglichkeiten!

  • #36

    Tirol meine Heimat (Freitag, 21 Oktober 2011 10:29)

    darauf warte ich schon lange - Danke !

  • #37

    Connys - little Gemstone World & Travel Blog - Asia (Freitag, 21 Oktober 2011 10:57)

    WOW super !

  • #38

    gatsby (Freitag, 21 Oktober 2011 13:12)

    Ok, und ich verstehe überhaupt nicht wie das gehen soll...

  • #39

    Lukas Juchems (Freitag, 21 Oktober 2011 16:04)

    Endlich mal was, das man gebrauchen kann!

  • #40

    Lukas Juchems (Freitag, 21 Oktober 2011 16:12)

    Nur wie macht man das auch für den normalen Text oder für Überschriften? Denn eine benutzerdefinierte Font nur im Head-Bereich bringt mir nicht so wirklich viel. Grüße

  • #41

    Marcel Gommolla (Freitag, 21 Oktober 2011 16:20)

    Für mich uninteressant.
    Ich shoppe da doch lieber in meinem Photoshop....für alle anderen weiss ich nicht ob´s nicht zu kompli ist auf diese art.
    ciao aus der Pixelwerkstatt

  • #42

    Daniel Schubert (Freitag, 21 Oktober 2011 21:44)

    Super Sache

  • #43

    Claudia Renetzeder (Samstag, 22 Oktober 2011 00:34)

    Find' ich an sich toll, aber nur im Header eine coole Schrift und nicht bei den Überschriften - wie sieht das denn aus! Und - bitte bitte macht mal den Newsletter salonfähiger! DANKE!

  • #44

    sessel-24 (Samstag, 22 Oktober 2011 10:29)

    Diese Tipps sind echt klasse. Macht weiter so...

  • #45

    schlangentanz-berlin (Samstag, 22 Oktober 2011 18:41)

    ein paar extravagante schriftarten für den gesamten text der webseite wären schön :)

  • #46

    ADMIN (Samstag, 22 Oktober 2011 22:34)

    Ich werds mal probieren ...

  • #47

    collectors-palace (Sonntag, 23 Oktober 2011 10:34)

    tolle tipps!

  • #48

    aplusphoto (Montag, 24 Oktober 2011 16:58)

    danke, mal schauen ob ich noch mal wechsel! lg

  • #49

    weichenberglernaturkost (Dienstag, 25 Oktober 2011 11:23)

    Wir haben was dagegen, wenn auf unserer Jimdopage immer mehr Geldhaie eingebunden werden. Das geht doch auch kollegial.
    Hallo Kollegen!

  • #50

    http://bit.ly/sfkifm (Donnerstag, 27 Oktober 2011 23:23)

    http://bit.ly/sfkifm

  • #51

    hl71 (Samstag, 29 Oktober 2011 20:51)

    naja, mehr würde mich interessieren, dass auf jeder Seite ein anderer Header möglich ist, oder die Haeder automatisch wechseln - das wäre noch ein Highlight!

  • #52

    Kostenlose Marketing-Tipps auf meiner Homepage: Kunden finden - Kunden binden (Sonntag, 30 Oktober 2011 19:29)


    Professionelles Titelbild? Photoshop! Alles andere wirkt laienhaft.

  • #53

    allinclusiveleben (Mittwoch, 02 November 2011 14:35)

    sorry, kann ich auch nicht ;-( viele wege führen nach rom. ich hätte gerne die auswahl im programm, danke ;-)

  • #54

    einvach (Donnerstag, 03 November 2011 11:19)

    ich denke, bei schriften muss generell nachgebessert werden. die auswahl ist einfach zu gering!!

  • #55

    Apfelattack (Sonntag, 06 November 2011 13:44)

    Ey thanks wir haben hier 1 Eintrag gemacht und gleich 5.000 Besucher gehabt tax euch allen

  • #56

    Urlaub in Thailand (Mittwoch, 09 November 2011 00:11)

    Jimdo passt sich schon den Wünschen der User an, gar keine Frage, aber ich stimme "hl71" zu: Auf wechselnde header warte ich ebenfalls und würde mich echt tierisch freuen, meinen Besucher mit mehreren Thailand Urlaubsbildern zu beglücken ;)

    Beste Grüße,

    Michael

  • #57

    Michael Nentwig (Donnerstag, 10 November 2011 11:25)

    Das ist ganz und gar nicht Jimdo-like, da viel zu kompliziert. Geht einfacher in Photoshop.

  • #58

    Webmaster/Anonym (Montag, 21 November 2011 12:32)

    Das ist das schwierigste, das ich je gesehen habe

  • #59

    countrymusikmagazin (Donnerstag, 01 Dezember 2011 17:32)

    Gute Idee, würde damit auch klar kommen, aber bin mit meiner HP, so wie sie ist, sehr zufrieden.

  • #60

    J. F. F. R. (Samstag, 03 Dezember 2011 19:27)

    ” Wer A sagt, der muß nicht B sagen. Er kann auch erkennen, daß A falsch war. “
    Bertolt Brecht

  • #61

    therming (Samstag, 17 Dezember 2011 18:18)

    Toller Tipp, um eine alternative Schrift auch auf einer skalierten Seite scharf darzustellen. Der Font-Wechsel funktioniert bei mir auf der gesamten Seite - aber leider nicht im Header?!? Wer kann helfen?

  • #62

    Wasserbasierte Hobbyfarben und Klebstoffe - Reine Farben für Umwelt und Gesundheit (Samstag, 29 September 2012 10:36)

    Simple erklärt und verstanden. Schjerning-Farben sagt danke!

  • #63

    fewos-cuxhaven (Mittwoch, 10 Oktober 2012 11:48)

    Ich finde den Tipp sehr hilfreich. Es ist einfach umzusetzen und eröffnet viele Möglichkeiten. Denn natürlich kann man die Fonts dadurch auch auf der gesamten Seite ändern (Man muss ja nur das entsprechende Element ansprechen). Da bei Jimdo nur sehr begrenzte Schriftarten zur Verfügung stehen ist finde ich diese Lösung sehr sinnvoll.

  • #64

    angelinasamericandream (Donnerstag, 01 November 2012 01:30)

    also ich hab wirklich alles schritt für schritt gemacht, erst den einen schnipsel eingesetzt dann denn komischen code unter 4.. und dann den code wo du oben im grauen kasten erklärst wo das important nicht fehlen darf oder so.. (bis dahin alles richtig!?)
    und dann hab ich auch speichern geklickt, hab die seite neu geladen.. und dann hab ich geschaut bei "style" und wollte da neu einstellen. da gab es aber nach wie vor die selben und keine neue.. was mach ich falsch!? Hilfe! :(
    Wer die lösung weiß, bitte zu mir kontakt aufnehmen!!

  • #65

    missjeans (Montag, 05 November 2012 13:56)

    I intended to draft you this bit of remark in order to say thank you once again for the pretty guidelines you've documented here. It is quite strangely open-handed of you to present unhampered precisely what a lot of people could have made available as an electronic book to generate some cash for themselves, and in particular now that you could have tried it if you decided. Those good tips likewise served as a good way to recognize that some people have a similar dream the same as my personal own to understand a whole lot more concerning this condition. I am sure there are lots of more fun periods ahead for many who take a look at your website.

  • #66

    Claudia Finking (Samstag, 01 Dezember 2012 21:03)

    Ich finde das Ganze sehr kompliziert. Ich konnte es nicht auf meiner Homepage umsetzen.

  • #67

    Klaus (Montag, 17 Dezember 2012 03:56)

    Sehr schöne Arbeiten.

  • #68

    cacostam (Montag, 25 Februar 2013 22:08)

    Dank für alle jimdo.

  • #69

    Moje programy (Mittwoch, 24 Juli 2013 22:10)

    Das haut mich jetzt nicht um :)

  • #70

    http://test.pl (Donnerstag, 25 Juli 2013 20:05)

    http://test.pl

  • #71

    jinsei-aki (Freitag, 09 August 2013 11:18)

    Wow, richtig praktisch, danke! Hab gerade erst vor ein paar min. meine Wbside erstellt und fand die Scriftarten langweilig, also wirklich vielen dank ;D
    Lg Aki chan

  • #72

    Laptop Adapter und Batterien (Montag, 14 Oktober 2013 05:46)

    Bloggers, ist Ihr Blog wirklich gut geschrieben!
    Kann meine Website darüber wiedergegeben werden?

  • #73

    Sven Fauth (Mittwoch, 20 November 2013 18:22)

    Die Webfonts direkt in Jimdo zu intergrieren wäre wohl noch eleganter.

  • #74

    adaptateur ac (Mittwoch, 27 November 2013 09:54)

    und dann hab ich auch speichern geklickt, hab die seite neu geladen.. und dann hab ich geschaut bei "style" und wollte da neu einstellen. da gab es aber nach wie vor die selben und keine neue.. was mach ich falsch!? Hilfe! :(
    Wer die lösung weiß, bitte zu mir kontakt aufnehmen!!

  • #75

    ac adapter (Mittwoch, 27 November 2013 09:55)

    Your content is excellent and contains tons of great information. Your
    perceptions on this topic are interesting, profound and different. I agree with a lot of this material. Thank you.

  • #76

    adattatore portatile (Mittwoch, 27 November 2013 09:55)

    Kann meine Website darüber wiedergegeben werden?

  • #77

    Hong Kong Escorts (Samstag, 17 Mai 2014 16:38)

    Thank you for sharing with everyone!

  • #78

    orlando limousine service (Samstag, 13 September 2014 12:40)

    Da ich ja nur Artikel zum Basteln und Handarbeiten anbiete, sind diese Tipps nicht so wirklich was für mich, aber für die verschenkbares anbieten ganz bestimmt.

  • #79

    Diesel Performance Parts (Freitag, 26 September 2014 18:24)

    Eine super Sache!

  • #80

    colorjuice (Montag, 01 Dezember 2014 11:06)

    Finde ich toll, aber: Funktioniert das auch noch mit dem neuen Jimdo-Editor? Da stehen ja jetzt bereits verschiedene Schriftarten zur Verfügung, ersetzen diese möglicherweise diesen Tipp hier?

    Im Head-Bearbeiten-Fenster erscheint beim Speichern der Hinweis "Der Code wurde bereinigt gespeichert" und sieht dann so aus:

    <style type="text/css">
    /*<![CDATA[*/

    #emotion-header-title {
    font-family: 'Lobster', cursive!important;)
    }

    /*]]>*/
    </style>

    Dargestellt wird danach aber kein Titel mit der Schriftart von Google.

    Besten Dank für eure Antwort.

  • #81

    calgary naturopathic (Montag, 15 Dezember 2014 08:22)

    calgary naturopathic