Schriftart für Posttitel ändern


Hallo Ihr Lieben,

Wir zeigen euch heute, wie Blogspot-Blogger und Bloggerinnen eine andere Schriftart beim Posttitel einbinden können, die man unter Vorlagendesigner nicht findet.


Schritt 1 - Schrift suchen

Öffnet diese Seite: fonts.google.com.

Die Seite sieht so aus:

Rechts oben findet ihr das Suchfeld, falls ihr eine bestimmte Schrift sucht. Ansonsten könnt ihr eure Auswahl unter "Categories" noch weiter einschränken. Ansonsten scrollt einfach durch, bis ihr eine schöne Schrift gefunden habt.

Klickt auf das + Zeichen rechts oben an eurer ausgewählten Schrift. Unten erscheint dann ein schwarzer Balken, den ihr anklicken könnt:


Kopiert den markierten Bereich.

Schritt 2 - Schrift einbinden


  • Geht zu Design.
  • Öffnet "HTML anpassen".
  • Sucht mit STRG+F nach </head>. (Wie suche ich etwas im Code?)
  • Fügt den Code aus Schritt 1 genau eine Zeile über </head> ein. Er sollte unter </b:skin> stehen.
  • Fügt vor dem letzten > Klammer noch ein / Schrägstrich hinzu:
    <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet" />


Schritt 4 - Schrift anwenden



Ab hier trennen sich die Wege für die Vorlagendesigner-Nutzer und dem Blogger mit dem Minima-Design!




a) Vorlagendesigner



So, jetzt sucht ihr wieder mit STRG+F "Post Title". Es müsste dann so aussehen wie unten.



Der gelb-markierte Text ist dann eure aktuelle Schrift (Muss nicht wie bei uns Arial sein, kann genauso gut Trebuchet oder Verdana sein). Schaut zu, dass ihr das richtige erwischt, denn wenn ihr das bei default="..." ändert, passiert nichts :) Also, schreibt da dann den Namen eurer Schrift hinein, und zwar bei Arial, das heisst, die erste Schriftart in der liste nach dem 22px. Das ist die Schrift, die ihr später auch angezeigt bekommt.


b) Minima Blogger-Design


Ihr sucht nach h3.post-title und fügt direkt darunter den Code aus Schritt 2 zwischen h3.post-title { und } ein, in diesem Beispiel ist es:
font-family: 'Neucha', cursive;
Dann müsste es dann so aussehen:



Dort steht im Beispiel natürlich dann 'Neucha' und nicht 'Quicksand'. ;)

Viel Glück und viel Spaß mit eurer neuen Schrift. :)

12.04.2017 /// Letztes Update von Mira

86 86 Kommentare

  1. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  2. Sehr gu gemacht! Habe gerade Schritt für Schritt mitgemacht und es hat geklappt!

    AntwortenLöschen
  3. ich find weder "post title" noch ".post h3" :/ was mach ich jetzt?^^

    AntwortenLöschen
    Antworten
    1. Geht im Dashboard auf "Vorlage", dort auf "Anpassen", dann "erweitert" und ganz unten auf "CSS hinzufügen".
      Dort fügt ihr folgendes ein:

      h3.post-title a{
      //hier eure Anpassungen
      }

      So könnt ihr u.A. auch die font ändern, die ihr zuvor eingebunden habt!
      Da der Posttitel als Link fungiert, muss das Attribut "a" (für "anker") dazu.


      Gruß
      Nik

      Löschen
  4. Hat super geklappt, danke für das Tutorial! :)

    AntwortenLöschen
  5. Hey. :)
    Ich hätte dringend eine Frage; ich habe die Navbar bei mir gelöscht und würde gern einen eigenen "Text" (im prinzip so wie bei dir mit startseite, team, usw.) erstellen. Würde mich freuen wenn du mir helfen würdest. :)

    Liebste Grüße.

    AntwortenLöschen
  6. jaa es hat auch bei mir geklappt. habe zwar dieses "value" erst nicht gefunden weil es bei mir irgendwie anders war, aber es ging. vielen dank <3

    AntwortenLöschen
  7. bei mir klappt das nicht,wenn ich dass gemacht hab sagt blogger ich solle genau beschreiben was ich gemacht hab und so ;o

    AntwortenLöschen
  8. Bei mir stand auch erstmal gaaaaaaanz viel zwischen skin und head.
    Aber dann habe ich es gefunden und es hat geklappt :)

    Wenns jemandem hilft: das richtige ,,head" war bei mir Nummer 23 von 36(steht in dem strg+f kästchen ;))
    Dann direkt dadrüber eingefügt, bei post title schrift verändern und schon ists geschafft!

    DANKE!! :)

    herzallerliebstegrüße
    http://marquicee.blogspot.com/

    AntwortenLöschen
  9. ich hab mich shcon lange gefragt wie man das ändern kann. (:

    vielen dank. <3

    AntwortenLöschen
  10. Bei mir gibt es ".post h3" nicht. Kann mir jemand weiterhelfen? Wäre superlieb! :)

    AntwortenLöschen
  11. es hat geklappt, super, danke !!!!

    Dein Blog ist einfach absolut super, denn deine tutorials sind einfach und verständlich und so kann ich mir meinen Blog langsam aber sicher so gestalten wie ich möchte. Danke!

    AntwortenLöschen
  12. Huhu, bei mir hat es auch geklappt...musste aber meinen Freund fragen ob er mir mal helfen könnte^-^

    Deinen Blog find ich super klasse, hier findet man doch immer hilfe^^

    http://mrshummeldesign.blogspot.com/

    Liebste Grüsse Eure Mrs.Hummel

    AntwortenLöschen
  13. Das wollte ich jetzt mal ausprobieren. Leider funktioniert das bei mir nicht. Wo genau kommt denn der Code ganz oben rein, von dem Du schreibst: ??

    und packt einen / am Ende des Codes (sehr sehr wichtig, sonst klappt das am Ende nicht!!).

    Kurz vor und nach /head?

    Viele Grüße nochmal
    Sara

    AntwortenLöschen
  14. Nach etlichen versuchen hat es auch entlich bei mir gklappt (:
    Aber wie kann man den Posttitel Zentrieren?

    AntwortenLöschen
  15. puuh also ich hab das jetzt schon mehrmals probiert, alles befolgt, aber anscheinend mache ich trzd was falsch..

    AntwortenLöschen
  16. irgendwie steht die schrift da bei mir schon, was mach ich dann?! :D

    AntwortenLöschen
  17. Ohne eure Bildanleitungen wäre ich am Ende....:D Danke!!

    AntwortenLöschen
  18. Ich hätte da mal eine Frage, und zwar wie kann ich den Post-title und das datum oben zusammen in ein kästchen setzten. undgefähr so: http://www.victoria-originals.com/
    danke :*

    AntwortenLöschen
  19. hab dieses tut gerade entdeckt und total begeistert!
    ich muss einfach mal sagen, wie super ich euren tutorialblog finde!
    super hilfrecih, super erklärt, und macht spaß!!

    vielen lieben dank :)

    AntwortenLöschen
  20. hm ich weiß nicht wo ran es liegt aber ich find das .post h3 bei mir nicht :(

    AntwortenLöschen
  21. ich könnte heulen :(
    hab mich sooo gefreut diese seite hier gefunden zu haben und bei mir klappt NiX !
    ich weiß echt nicht wieso .. bei mir sieht der html code total anders aus .. kann es daran liegen das ich ne vorlage gespeichert hab oder keine ahnung ich bin ratlos :(

    AntwortenLöschen
  22. Geht das auch für den kompletten Post Text?
    Kathi ☺

    AntwortenLöschen
  23. 10000 DAnk, Stunden ohne Euch vorher zu finden, am Pc gegluckt ;)))
    LG
    missi

    AntwortenLöschen
  24. geht nicht.. bei mir geht gar keins eurer tutorials bei denen man irgendwas mit HTML macht!!!

    AntwortenLöschen
  25. bei mir funktionierts auch nicht ://

    AntwortenLöschen
  26. funktionert nicht :( nur dass jetzt mein post. titel ganz anders aussieht als vorher und zwar nicht so wie ich wollte, sondern fast nicht lesbar!
    na toll.

    AntwortenLöschen
  27. DANKE!!!!!!bestes Tutorial! perfekt erklärt!

    AntwortenLöschen
  28. Danke. :)
    Hat alles geklappt. :D

    Aber kann man auch die Schriftfarbe manuell, also im HTML, ändern?
    Wenn ja, könntest du kurz erklären, wie das funktioniert?

    AntwortenLöschen
  29. Leider klappt das bei mir gar nicht! ;((Mache alles so wie es da steht ;((

    AntwortenLöschen
  30. Bei der neuen Vorlage muss man nach 'Title Font' suchen, 'Post Title' gibt es da nicht!
    Lena♥

    AntwortenLöschen
  31. bei mir funktioniert das irgendwie nicht,bei mir steht dann 'Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:'
    kann mir vielleicht jemand helfen?:(

    AntwortenLöschen
  32. tolles tutorial, aber was ist wenn man keine schrift von google web fonts möchte? gehen die nicht?

    AntwortenLöschen
  33. Bei mir funktioniert es leider auch überhaupt nicht. Wenn ich es abspeichern will kommt immer folgende Meldung: Fehler beim Parsen der XML, Zeile 1012, Spalte 5: The element type "link" must be terminated by the matching end-tag "".
    Dabei habe ich alles nach Anleitung gemacht und den Code genau von Google übernommen und das / rangehängt. Ich weiß wirklich nicht was ich falsch mache. Hat jemand einen Tipp?

    AntwortenLöschen
  34. VIELEN DANK!!!!! Hat mir sehr geholfen!:-)))

    AntwortenLöschen
  35. Bei mir klappt es ebenfalls nicht, da ich kein "Post Title" habe -.-grrrrr und ich finde sonst nichts anderes, wo ich es einfügen kann.

    AntwortenLöschen
    Antworten
    1. Ok, habs nun irgendwie hinbekommen. Hätte aber noch eine andere Frage: Kann ich im Post-Titel den ersten Buchstaben in einer anderen Farbe setzen? Bzw wie funktioniert dies?

      Löschen
    2. Dashboard - Vorlage - Anpassen - Erweitert - CSS hinzufügen

      h3.post-title:first-letter {
      color: red;
      }

      Löschen
  36. bei mir ändert sich dann nichts :( könnt ihr helfen ?

    AntwortenLöschen
  37. ich hab das problem bei mir steht nirgends value sondern nur default....!?

    AntwortenLöschen
  38. super, dass Ihr so viele Tipps auf Eurem Blog gebt!

    Ich habe versucht, eine Schrift hinzuzufügen, bin aber leider nicht sehr weit gekommen. Und ich konnte die von Euch beschriebene Stelle im "HTLM bearbeiten" nicht finden.

    Habe ich eine andere blogger.com-Version und wie könnte sie bei mir lauten?
    Danke für eine Antwort!
    lg Valery

    AntwortenLöschen
  39. AN ALLE DIE PROBLEME HIERBE HABEN:

    nachdem ihr die schritte wie oben beschrieben abgearbeitet habt, müsst ihr noch etwas separat in css einfügen!
    hatte gerade selbst probleme, aber jetzt gehts! (:

    also, wenn ihr euch das bild mit dem web-link vom tutorial oben anschaut, ist nicht nur der link orange unterstrichen sondern auch noch die zeile bei 4., wo steht '4. Integrate the fonts into your CSS'. und genau DAS müsst ihr noch tun.

    bei dem alten blogger design weiß ich leider nicht, wo eure post-überschriften deklariert werden. bei der jetzigen version sind meine post-überschriften unter 'h3.post-title' auffindbar (ich weiß aber nicht, ob das eine allgemeine bezeichnung ist)

    auf jeden fall müsst ihr da eure unter 4. angegebene Zeile (zb. font-family: 'Josefin Sans', sans-serif;) zwischen den geschweiften klammern einfügen.

    so hat es bei mir geklappt, ich hoffe ich konnte ein bisschen helfen!

    x

    www.testingmyfate.blogspot.de

    AntwortenLöschen
  40. Hey Danke für das Tolle Tut!
    Das erste mal, dass es geklappt hat! Freu mich total :)))

    AntwortenLöschen
  41. Hallo und guten Tag,

    an alle Leute, die Probleme haben die Posttitel zu ändern:
    Geht im Dashboard auf "Vorlage", dort auf "Anpassen", dann "erweitert" und ganz unten auf "CSS hinzufügen".
    Dort fügt ihr folgendes ein:

    h3.post-title a{
    //hier eure Anpassungen
    }

    So könnt ihr u.A. auch die font ändern, die ihr zuvor eingebunden habt!
    Da der Posttitel als Link fungiert, muss das Attribut "a" (für "anker") dazu.


    Gruß
    Nik

    AntwortenLöschen
  42. gaaanz wichtig und bitte schnell um Antwort:) kann man das tutorial auch bei dem Design MINIMA anwenden?

    alles liebe:)

    AntwortenLöschen
    Antworten
    1. Klar geht das, du musst halt die Anleitung nach den alten Designs machen ;)

      Löschen
  43. Bei mir steht das head über dem b:skin... auch ohne /. Ein anderes head oder skin kann ich leider nicht finden, habt ihr einen Rat? Es funktioniert so nämlich leider bei mir nicht :/

    AntwortenLöschen
  44. Hey, vor ein paar Monaten hat bei mir alles super geklappt, doch jetzt wollte ich die Schriftart meiner Posttitel noch mal ändern und jetzt bewegt sich gar nichts mehr. Egal, was ich in der HTML-Vorlage oder in den CSS Einstellungen eingebe, nichts passiert. Ich weiß echt nicht mehr weiter! Selbst die Standardschriften nimmt er nicht...
    Wäre toll, wenn ihr mir helfen könntet!!
    Liebe Grüße, Patricia

    AntwortenLöschen
    Antworten
    1. Hast du die Schriften auch richtig eingebunden? Hab mal auf deinen Blog geschaut, im Quelltext ist es nicht.

      Löschen
  45. Ich kriege das einfach nicht hin! Habe schon alles ausprobiert :((( MAN! Ich habs bei HTML anpassen eingetragen und dann bei CSShinzufügen auch, weil es das andere bei mir auch alles nicht gibt ... Ich verzweifele :(( Was soll ich machen?

    AntwortenLöschen
  46. Funktioniert bei mir auch nicht. Ich kann noch nicht einmal nach head suchen. Kommt immer Fehlermeldung.

    AntwortenLöschen
  47. Und wie mache ich das mit Schriftarten die ich nur downloaden kann?
    Die die ich möchte gibt es nicht bei googlefonts :/
    Und da wo es sie gibt kann man sie nur runterladen

    AntwortenLöschen
  48. Wooow, cool danke :-)

    AntwortenLöschen
  49. Hab alles gefunden, alles genau so eingefügt, aber im blog hat sich nix geändert. schade... :-((

    AntwortenLöschen
  50. kann mir jemand sagen welches layout sie benutzt? http://colourful-inspiration.blogspot.de/

    AntwortenLöschen
  51. Hätte das Tutorial gerne ausprobiert, nur leider sind alle Fotos nicht mehr zu sehen. So ist es für Anfänger leider nur schwer nachzuvollziehen :/

    AntwortenLöschen
  52. schade kann ich deine Bilder nicht sehen! =( sonst hätte mir dieser Beitrag bestimmt geholfen...
    Ich würde gerne zwei Schriften bei meinem Titel verwenden,.. geht sowas?
    liebe grüsse S

    AntwortenLöschen
  53. Super ! Schritt für Schritt gemacht und es hat alles geklappt !

    AntwortenLöschen
  54. Hmm, ich hätte gern gewusst, an welcher Stelle im Sourcecode man die Schriftart und -farbe für den in den Feeds in meiner Blogliste (die mit den kleinen Vorschaubildchen) ändern kann.

    http://herz-und-leben-blogliste.blogspot.de/

    Im Vorlagendesigner geht das nicht, aber ich nehme sowieso lieber Veränderungen selbst im html-Code vor. Das kann man dann später auch noch nachvollziehen. Nur kenne ich mich nicht so top mehr aus ...

    Liebe Grüße
    Sara

    AntwortenLöschen
  55. Hey Leute :) weiß jemand wie man die Schriftart im Post selbst, also nicht nur die Überschrift ändert ??;))) Freue mich sehr über Hilfe ;)

    AntwortenLöschen
  56. ich hab da ein problem… ich hätte gerne die helvetica neue als Schrift auf meinem blog, die lässt sich aber schon bei google Fonts nicht hinzufügen. dieser button existiert dort einfach nicht.. was kann ich tun?

    AntwortenLöschen
  57. Kann man auch Fonts verwenden, die nicht von Google Fonts kommen?
    Ich würde nämlich gerne eine von Dafont verwenden!
    http://fakeplasticfriends.blogspot.co.at/

    AntwortenLöschen
  58. hallo,
    ich habe alles so gemacht, hat leider nicht funktioniert.
    eine freundin hat gemeint ich müsste die schrift vorher auf meinem pc speichern.
    kann es daran liegen. wie speichere ich die schrift?
    lg und danke
    andrea

    AntwortenLöschen
  59. es geht nicht.. :(
    habe alles versucht und so gemacht aber blogger scheint mich nicht zu mögen. -.-

    AntwortenLöschen
  60. Liebe Mira,
    gibt es eigentlich eine Möglichkeit, innerhalb des Blogposts eine andere Schriftart für eine Überschrift zu wählen?
    Wäre richtig toll, wenn es einen Tip gibt, wie man das am esten funktionieren könnte.
    Ganz liebe Grüße und vielen Dank für deine stets super klasse Tutorials. :)
    Minusch

    AntwortenLöschen
  61. Ich liebe deine ganzen Tutorials, vielen Dank für die Tipps!!:-)

    AntwortenLöschen
  62. Hilfe, ich finde den Reiter "HTML Bearbeiten" bei Vorlage unter Dashboard nicht ... bin ich blind ?? Danke & LG, Katja

    AntwortenLöschen
  63. Hallo liebe Mira, ich habe eine Bitte an dich! Ich habe alles so gemacht wie es oben steht doch leider ändert sich bei der Schrift überhaupt nichts... Egal wie ich es machen. Ein Freund von mir ist Webmaster und selbst mit seinen Anweisungen hat es nicht geklappt. Ich hätte gerne Poiret One als Schriftart, aber es ist immer noch die alte Schrift. Könntest du mir bitte helfen???

    www.glueckskind-rebecca.blogspot.de

    DANKE <3

    AntwortenLöschen
  64. Juhu! Hat geklappt! Endlich eine neue Schriftart!!!
    Viele Grüße
    Tatjana

    AntwortenLöschen
  65. Facebook USA Likes Help In Winning Web Competitive Events: An Assessment. How Targeted Facebook Followers Can Work As Business Promotional Tools: An Assessment. buying usa facebook likes.

    AntwortenLöschen
  66. Liebe Mira, wie kann ich dir eine Nachricht zusenden? Ich bräuchte dringend Hilfe bei meinem Blogspot... du scheinst mir irgendwie allwissend und würde mich super freuen, wenn du eine Minute für mich hättetst. Liebste Grüße Yvonne

    AntwortenLöschen
  67. Bei mir finde ich nicht < /head>

    AntwortenLöschen
  68. Hallo!
    Bei mir funktioniert das ganze auch irgendwie nicht, egal was ich mache. Aber ich kenne mich auch nicht wirklich mit HTML oder CSS aus. Jedenfalls wollte ich den Post-Titel in 'ner anderen Farbe und 'ner anderen Schrift als Post und Datum. Was ja auch im Vorlagendesigner normal möglich ist. Habs dort auch geändert und dort zeigt er mir auch ales si an wie ich will. Gehe ich dann auf meinen Blog ist wieder alles hinfällig. Habs jetzt auch versucht, im HTML-Code das zu ändern so wie dus beschrieben hast, aber da steht bereits die Schrift drin. Nur anzeigen tut ers einfach nicht. Hat jemand 'ne Idee?

    Schrift die rein soll ist Calligraffti in 36x & mit dem Farbcode #b87209"

    :-(
    Liebe Grüße

    AntwortenLöschen
  69. Dein Tutorial hat super funktioniert :). Ich habe wohl schon seit Juni 2015 meinen BLOG (http://romisromane.blogspot.co.at), aber habe mich noch nie in der HTML-Vorlage versucht, dank dir hat es aber wie am Schnürchen geklappt - danke dafür. LG

    AntwortenLöschen
  70. Super!!!!
    Bei mir hat es geklappt! Vielen, vielen dank für al eure tollen tutorials!!

    AntwortenLöschen
  71. Super!!!!
    Bei mir hat es geklappt! Vielen, vielen dank für al eure tollen tutorials!!

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.