29 April 2013

Tutorial: Eigene Schrift in den Blog einbinden

Hallo,
ihr denkt euch sicherlich auch ab und zu, dass Blogger einfach viel zu wenige Schriftarten zur Verfügung stellt, mit der man seinen Blog verschönern kann. Und alle Blogs sehen dann immerzu gleich aus. Dann gibt es oft das Problem, dass man es zwar schafft, eine eigene Schrift einzubinden, die wird dann aber nur vom eigenen PC angezeigt und alle anderen sehen an ihren PC dann eine Ersatzschrift wie Times New Roman oder Arial, was ja nicht Sinn und Zweck der Sache ist.

Wichtig ist, dass man Schriften benutzt, die für das Web freigegeben sind und somit von allen Computern gelesen werden können. Solche Schriften nennt man Webfonts und von denen gibt es mittlerweile eine gute Menge.

Meine persönliche Lieblingsseite für Schriftarten ist GOOGLE FONTS. Mein Tutorial basiert auch auf dieser Seite. Ich finde diese Seite sehr gut, da es dort schon 624 Schriftarten gibt und man verschiedene Beispiele hat, mit denen man sich die Schriften anschauen kann. Es gibt sogar die Möglichkeit, einen eigenen Beispielsatz zu schreiben.

1. Wenn ihr euch auf der Seite eine schöne Schrift ausgesucht habt, klickt dann auf die Schaltfläche --->Quick-use. 

2. Dann kopiert euch den HTML-Code, der als dritter Punkt angegeben ist.


3. Wichtig ist, dass euer HTML-Designer diesen Code nicht lesen kann, deswegen müsst ihr dringend dort, wo ich den roten Kreis eingefügt habe, noch ein / einsetzen, sodass der Code dann am Ende so aussieht:

...type='text'/css'/>

Das ist sehr wichtig!

4. Geht auf euren HTML-Designer, drückt Strg+F und gebt den Befehl </head> ein. Das sollte dann so aussehen.

5. Fügt nun euren kopierten und mit dem / versehenen Code vor den Befehl </head> ein, so wie ich es schon in dem Beispiel mehrmals getan habe. Somit ist die Schrift für alle Computer lesbar.

6. Eure Wunschschrift ist zwar nun verwendbar, aber muss noch an den richtigen Stellen eingebaut werden. Wenn ihr wollt, dass eure Postüberschrift immer eine andere Schrift habt, so geht wieder auf euren HTML-Designer, drückt Strg+F und gebt Post Title ein. Euer Bereich sollte dann so aussehen.

7. Der Bereich, den ich markiert habe, gibt an, welche Schriftart für den Posttitel verwendet wird. In diesem Beispiel ist es nun Noto Serif. An genau dieser Stelle gebt ihr nun den Namen eurer Wunschschrift an. Wenn ihr ihn vergessen haben solltet, er steht immer in den Befehlen.

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

Diesen Namen gebt ihr dann, ohne das Pluszeichen, dort ein, wo die Schrift verwendet werden soll. Das kann man auch bei dem Datum machen - zu suchen unter Date Header -  oder bei der Gadget Überschrift - Gadget Title - und so weiter. Manchmal muss man ein bisschen suchen, um den richtigen Bereich zu finden, da die unterschiedlichen Vorlagen und Layouts unter anderem andere Befehle haben. Meistens findet man mit der Zeit aber raus, nach welchen Befehlen man suchen muss.

Wenn man einmal den Dreh raus hat, ist es ganz einfach :)


26 Kommentare:

  1. Yupiiiiiii! Dank Deinem Tutorial habe ich es geschafft. Danke. Es war super leicht zu verstehen. Ich bin an mehr interessiert!
    Leider sind bei mir nach dem Ändern des Portitels das Laboe-Widget verändert. Weißt Du hier auch Rat.

    Ich danke Dir wirklich ganz herzlich.
    Liebe Grüße,
    Verena

    AntwortenLöschen
    Antworten
    1. Hallo Verena,
      leider weiß ich nicht genau, was dein Problem ist. Bei einem Blick auf deinem Blog sieht alles eigentlich sehr gut aus ;) Ich hoffe, du konntest dein Problem mittlerweile lösen :)
      Liebe Grüße, KQ

      Löschen
  2. Super!!!!!!!!!!!! Vielen lieben Dank :)

    Liebe Grüße, Katja

    AntwortenLöschen
    Antworten
    1. Hallo Katja,
      freut mich, dass dir mein Tutorial gefallen und geholfen hat.
      Liebe Grüße, KQ

      Löschen
  3. Hallo Sternenglimmer,
    am besten schreibst du mir mal eine private Nachricht an kq-buchblog(ät)web(p)de und erläuterst mir dein Problem, dann kann ich dir vielleicht helfen :)
    Liebe Grüße, KQ

    AntwortenLöschen
  4. Hi,

    deine Erklärung ist wirklich gut und einfach, aber irgendwie klapt es bei mir nciht. Mein Blog ist niegelnagel neu und ich war Happy das es doch eine möglichkeit gibt diese sieben blöden udn doch recht lahmen standartschriften im Posting zu entgehen, aber es will nciht klappen. Auch wenn cih es so mache bekomen ich keine andere Schrift ausgewählt. Dabei hatte ich mir für meinen ersten Post so einen hübschen Font ausgesucht... -.-

    Hab auch genau wie angegeben den Code samt / gesetzt und bekomme sie trotzdem nicht zum auswählen für den Text angezeigt. Muss ich was weg machen?

    Grüße von der Ruby
    Vielleicht kannst du mri ja helfen.

    AntwortenLöschen
  5. Wenn ich "Post title" in der Suche eingebe, kann ich nur die Farbe verändern. Kann das vllt an meiner Vorlage liegen? Ich habe leider keine Ahnung von HTML ...

    AntwortenLöschen
    Antworten
    1. Hallo Johanna,
      also ich habe das bisher bei verschiedenen Blogs ausprobiert und es hat immer geklappt. Wichtig ist, dass du Strg+F erst dann drückst, wenn du vorher mal mit der Maus in das HTML-Feld geklickt hast. Sonst sucht der Pc nicht dort, sondern auf dem Rest der Seite.
      Liebe Grüße, KQ

      Löschen
  6. Hallo,
    Du musst unbedingt mehr Tutorials schreiben - das brauchen wir!! Den Schatten hinter den Bildern hatte ich in null-komma-nix weg, aber vllt könntest du noch schreiben, wie das mit der Schrift funktioniert, wenn ich diese bereits im Rechner habe? Ich möchte gern Zapfino als Posttitel einfügen, komme aber über google fonts nicht weiter. Es ist eine Webschrift, aber ich kann nur downloaden - über ein Abo? - das brauche ich ja eigentlich nicht. Möglicherweise hat sich die Page bei google fonts geändert? Bei mir sieht das auch ganz anders aus als in deinem Tutorial.
    Vielen Dank und viele Grüße, Stephie

    AntwortenLöschen
    Antworten
    1. Hallo Stephie,
      so wie es aussieht, ist die Schriftart Zapfino nicht geeignet, da es keine freie (kostenlose) Webschrift ist. Leider basiert mein Wissen nur auf der Seite Google Fonts, vielleicht findest du dort ja eine Schriftart, die dir gefällt. Google Fonts sieht bei mir, bis auf winzige Änderungen, noch genau so aus, für die Schrift Zapfino wird man nur auf eine andere Website weitergeleitet, wo man die Schrift tatsächlich kaufen kann. So kann ich dir bei deinem Problem leider nicht helfen :/

      Liebe Grüße, KQ

      Löschen
  7. Hallo Sternenglimmer,
    leider ist es immer etwas schwierig, ein Problem zu lösen, wenn man es sich nicht anschauen kann.
    Hast du den HTML-Designer unter Vorlage > HTML bearbeiten geöffnet?
    Liebe Grüße, KQ

    AntwortenLöschen
  8. Hallo :)
    Bis zum Punkt 5 bin ich gekommen. "Eure Wunschschrift ist zwar nun verwendbar, aber muss noch an den richtigen Stellen eingebaut werden" und wie kann ich das jetzt einbauen? Ich will, dass nur die Überschrift meiner Postings diese Schriftart haben. Ich will auch, dass alle Postings die gleiche Überschrift haben.

    AntwortenLöschen
  9. *alle Postings die gleiche Schriftart haben.

    AntwortenLöschen
    Antworten
    1. Hallo Laura,
      also eigentlich habe ich es Schritt für Schritt erklärt, wie die Schrift eingebaut werden muss, sogar mein Beispiel bezieht sich auf deine Frage: Post-Überschrift.
      Gib im Suchfeld (Drücke Strg+F, nachdem du aufs HTML-Feld vorher mit der Maus geklickt hast) Post Title ein (danach Enter drücken), wie du es bei meinem Bild oben sehen kannst erscheint dann ein Abschnitt über Post Title. Der rot markierte Bereich, in diesem Fall "Patrick Hand SC", bezeichnet die Schriftart für die Post-Überschrift. Da fügst du nun den Namen deiner Schrift ein, die du dafür haben möchtest. Dann auf Vorschau klicken und wenn es geklappt hat, speichern.
      Ich weiß ehrlich nicht, was ich da groß noch sagen soll, da es genau so in der Beschreibung oben steht ;)
      Liebe Grüße, KQ

      Löschen
    2. Schau dich einfach ein bisschen um, über Post Title stehen die verschiedensten Befehle, die im gesamten genau so aussehen, wie der von Post Title, sich eben nur auf andere Bereiche beziehen. "Blog Title" für Blogüberschrift, "Blog Description" für den Bloguntertitel, "Tabs Text" für die Tabs (sprich deine Menüführung Startseite, Über mich, Tutorials, Impressum was du bei mir oben links findest) und "Page" für die komplette Schrift deiner Postings und so weiter und so fort.
      Liebe Grüße, KQ

      Löschen
  10. Danke danke danke danke danke für diesen Post!
    Ich suche jetzt schon seit Wochen eine Möglichkeit um die Schriftart zu ändern und endlich klappt es.
    Mein Tag ist gerettet!
    Ganz liebe Grüße,
    Marie
    http://buntes-bonbon.blogspot.de/

    AntwortenLöschen
  11. Hey :-D
    ich habe gerade das Problem, dass ich nicht weiß, wo ich was einfügen muss. Ich suche mit im HTML-Text die Stellen, wo ich die Schrift verwenden möchte, speziell für den Blog-Titel, die Seiten-Titel und die Post-Titel. Wie sieht der HTML-Text der Stellen aus?
    Und noch eine Frage: meine Google Font ist Amatic SC. Als Code sieht die so aus: Amatic+SC:400,700. Was davon muss ich dann einsetzen?

    Vielen Dank schon mal!!
    LG Patricia

    AntwortenLöschen
    Antworten
    1. Hallo Patricia,
      für den Blog Titel suchst du unter "Blog Title", für die Seiten Titel unter "Tabs Text" und für Post Titel, wie ganz genau in meinem Beispiel erklärt, unter "Post Title". Die Bereiche sehen dann immer so aus wie oben (4. Bild, bzw. 6. Schritt).

      Dort, wo bei dem HTML-Code für Post Title bei mir "Patrick Hand SC" steht, fügst du bei dir ein: Amatic SC (ohne + Zeichen dazwischen).

      Such bei dir aber immer nur nach Post Title, Tabs Text oder Blog Title und nie nach dem ganzen Code, den ich oben als Foto eingefügt habe, da ich andere Daten stehen habe (wie z.B. Schriftart und Schriftgröße).

      Wenn es dir immer noch nicht weiterhilft, dann schreib mir bitte eine E-Mail (findest du rechts ins der Sidebar), dann kann man mal schauen, dass du mir vielleicht deine Einlogg-Daten gibst (wo du vorher dein Passwort abänderst und dann, wenn ich fertig wäre, wieder zu deinem üblichen Passwort zurück änderst) und ich das für dich verändre.

      Liebe Grüße, KQ

      Löschen
  12. den Bereich post title gibt es bei mir nicht :/ ich hab die minima vorlage bitte helfeeeen :)

    AntwortenLöschen
  13. Vielen vielen Dank für dieses Tutorial ! Stand zwar eine Weile auf dem Schlauch, aber jetzt hab ich gepackt ! Danke :)

    Liebe Grüße !
    _________________________
    baddicted.blogspot.de

    AntwortenLöschen
  14. Danke vielmals für das Tutorial.. Leider finde ich den Tag "Post Title" nicht =(

    Liebe Grüsse

    AntwortenLöschen
  15. Hi :)

    Vielen lieben Dank für das Tutorial. Es ist echt super!!! DANKE :)

    AntwortenLöschen
  16. Solche Posts sind eben auch nach Jahren noch hilfreich! Vielen Dank, hat mir sehr geholfen!

    AntwortenLöschen
  17. Hi,
    vielen Dank für dein Tutorial. Ich würde ganz gerne eine weitere Schrift für den Blogpost an sich. Dein Tutorial ist aber nur für Überschriften oder wie?
    LG Clara

    AntwortenLöschen
    Antworten
    1. Hallo,

      siehe den letzten Abschnitt meines Tutorials:

      "Diesen Namen gebt ihr dann, ohne das Pluszeichen, dort ein, wo die Schrift verwendet werden soll. Das kann man auch bei dem Datum machen - zu suchen unter Date Header - oder bei der Gadget Überschrift - Gadget Title - und so weiter. Manchmal muss man ein bisschen suchen, um den richtigen Bereich zu finden, da die unterschiedlichen Vorlagen und Layouts unter anderem andere Befehle haben. Meistens findet man mit der Zeit aber raus, nach welchen Befehlen man suchen muss."

      Bei jedem Blog-Template sind die Bezeichnungen anders, da hilft nur, zu suchen und auzuprobieren. In der Regel befinden sich aber alle diese Befehle (Post Title, Date Header usw.), die du mit dem Tutorial ändern kannst, im gleichen Abschnitt. Für den Blogpost kann zum Beispiel die Bezeichnung Page die richtige sein. Musst du halt testen.

      Gutes Gelingen!

      Löschen
  18. Der Iron replica rolex Walker Automatic Chronograph ist entweder mit einem mittelblauen Sunburst-Zifferblatt oder einem schwarz-silbernen „Reverse rolex fake kaufen Panda“ -Layout erhältlich. Der Wempe Iron Walker Automatic Diver ist vielleicht die auffälligste Abweichung von der replica watches Kernformel. Er verfügt über eine auffällige interne drehbare Tauchlünette in zwei Farben, die das Lesen auf einen Blick erleichtert. Um eine genaue rolex submariner replica Lesbarkeit bei schlechten Lichtverhältnissen zu gewährleisten, erhält der zentrale Sekundenzeiger replika uhren ebenfalls eine dreieckige Spitze. Für den Iron Walker Automatic Diver bietet Wempe zwei Zifferblattvarianten an - ein schwarzes Zifferblatt mit rolex imitat elektrischen blauen Akzenten und ein mittelblaues Zifferblatt mit weißen Akzenten. Der standardmäßige Dreihand-Wempe Iron Walker hält das replica uhren deutschland Grunddesign der Serie rein und bietet Varianten in Weiß, Schwarz und einem seeblauen Sunburst. Schließlich bietet die Iron Walker Damenlinie rolex replika das gleiche Zifferblatterlebnis wie der 40-mm-Iron Walker mit Zifferblättern in Weiß, Schwarz und fake Rolex Sunburst Blue.

    AntwortenLöschen