Support » Themes » Schriftarten ändern bei Überschriften

  • Gelöst lalune7

    (@lalune7)


    Hallo!

    Sollte das Thema schon mal behandelt worden sein, bitte ich vorab gleich um Entschuldigung, aber die Suchfunktion hat mir keine Antwort liefern können. Jedenfalls keine, die ich versteh 😉

    Ich habe das Template Twenty Ten installiert und mir gefallen die extrem plumpe Schrift der Buchstaben der ich nehme mal an Überschriften nicht. Ich kann die Titel von Seiten nicht formatieren und auch den Titel der Homepage nicht, auch kann ich deren Größe nicht beeinflussen. Nun hab ich mir schon das plugin „Use Any Font“ installiert – und bin so schlau wie zuvor, weil ich keine Ahnung hab, wie ich die am PC standardmäßig in Windows vorhandenen schriften da rein bekomme. Aber im Prinzip würden ja einige wenige reichen, die man sich eben ausgesucht hat.

    Hier mal ein Online-Screenshot, der hoffentlich das Problem verdeutlicht:
    http://prntscr.com/caqqa4
    ich hätte gerne den Titel der Seite und das Hello World in einer anderen Schrift, den Slogan oben rechts größer und die Schrift der Navigation geändert und größer.

    Im Stylesheet hab ich an sich nachgesehen, hab’s aber nicht finden können.

    Herzlichen Dank für jegliche Hilfe, Ihr werdet sicher Geduld mit mir haben, weil ich bei WP ein totaler Noob bin.

    LG,
    lalune

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Moderator Bego Mario Garde

    (@pixolin)

    … weil ich keine Ahnung hab, wie ich die am PC standardmäßig in Windows vorhandenen schriften da rein bekomme.

    Aus meinen WordPress-Kursen weiß ich, dass gerade Einsteiger hier eine falsche Vorstellung haben: Auf meinem PC ist die Schriftart „Bragadaccio“ installiert, die möchte ich gerne in meiner Website verwenden. Also stelle ich das CSS entsprechend ein … klappt doch, super!

    Leider vergessen die Anwender dabei, dass die Schriftart auf ihrem Computer installiert ist, nicht aber auf den Laptops, PCs, Tablets und Smartphones der Besucher der Website. Ist diese Schrift dort nicht installiert, fällt der PC auf eine Standardschriftart – Times New Roman – zurück. Das Ergebnis sieht natürlich völlig anders aus, als die schöne Ansicht am eigenen PC (auf dem die Schriftart installiert ist).

    Damit das nicht passiert, muss die verwendete Schriftart mitgeliefert werden. Google hat dazu einen Dienst entwickelt, bei dem sich Webentwickler einen Font aussuchen können und gleich das fertige JavaScript oder CSS angeboten bekommen, um es in ihre Website einzubinden. Wird nun die Website von Besuchern geladen, wird der eingebundene Font von Google mitgeliefert und im Browser korrekt angezeigt.

    Es gibt zahlreiche Plugins, mit denen du diesen Dienst Google Fonts auch ohne Programmierung nutzen kannst. Beim Plugin Easy Google Fonts kannst du z.B. im Customizer allen Überschriften (und Zwischenüberschriften) eine der zahlreichen angebotenen Schriftarten, Schriftschnitte (fett, kursiv) und sogar Farben zuweisen.

    Viel Erfolg!

    lalune7

    (@lalune7)

    Herzlichen Dank, das werde ich mal ausprobieren! 🙂

    lalune7

    (@lalune7)

    Hmm, okay – hab es jetzt installiert … und bin so schlau wie mit dem Easy Fonts. Wenn ich auf „bearbeiten“ geh, passiert leider genau nix. Und auf die Überschrift der Homepage hab ich auch keinen Einfluss.
    Vielleicht erklärt der Screenshot, wo ich hänge: http://prntscr.com/cb4z5t Überschrift „Über Uns“ bietet keine Möglichkeit für customize, auch nicht nach Installation und Aktivierung des Plug-ins.

    Allerdings finde ich geade das da: http://prntscr.com/cb50ia Ist das das Plug-in? Wie kann ich das einstellen, dass die die Schriftbilder anzeigt? Oder müsste ich die nun alle googlen um eine, die mir gefällt, dann auszuwählen?

    Tut mir leid, ich bin offensichtlich zu dumm dafür. :'(

    LG,
    lalune

    Flower33

    (@flower33)

    Hallo lalune,
    auf der Plugin-Seite steht in der ersten Zeile:

    For a quick video demo please view the vimeo screencast.

    Darin wird das Prozedere genau beschrieben.

    Falls dir das nicht reichen sollte, gibt es hier jede Menge weiterer Anleitungs-Videos.

    Flower33

    (@flower33)

    Übrigens: Auf der Google-Fonts-Website kannst du vorher alle Fonts in den verschiedenen Schnitten „live“ testen.

    lalune7

    (@lalune7)

    Danke Flower 33!

    das Video hatte ich angesehen und bin auch so vorgegangen, nur sieht das eben bei mir nicht so aus, trotzdem speichern und veröffentlichen. Die veränderung für den normalen Seitentext wurde sofort angezeigt, die H1 – H6 Änderungen werden hartnäckig ignoriert. Habe versuchsweise alle auf Courgette geändert – hier das Ergebnis: http://prntscr.com/cb68bm Absolut unverändert.

    Ich werd mir morgen die anderen Anleitungsvideos anschauen. Aber könnte es nicht sein, dass ich irgendwo im Template oder in den allgemeinen Einstellungen was umstellen muss, damit es Änderungen abseits des normalen Textes zulässt?

    LG,
    Lalune

    lalune7

    (@lalune7)

    so, nun hab ich ein Video gefunden, das das Problem ziemlich genau trifft, und wunderschön löst:

    Nur leider finde ich sowas in der Art in meinem template 20-10 nicht. Her mal der Quelltext:
    http://prntscr.com/cb6knt
    Es geht um die beiden blau markierten Begriffe, für’s Erste. Die möchte ich ändern. Ich sehe aber nirgends ein H2 oder ein p oder was auch immer zugeordnet, auch keinen Container, auf den ich mich beziehen könnte.

    Naja, wäre ja zu schön gewesen. Ich find das echt arg frustrierend! Und da behauptet jeder, WP ist ja soooooooo einfach, das kann jeder. :'(

    LG,
    Lalune

    Flower33

    (@flower33)

    Bleibst du noch eine Zeitlang dran? Dann erkläre ich es dir.

    lalune7

    (@lalune7)

    ja, bin noch da. Das ist sehr lieb, dass du mir helfen willst! <3

    Könnte es sein, dass hier das problem liegt? http://prntscr.com/cb6zk1 Es gibt die Startseite (mit dem Hallo Welt-beitrag) nicht, kann ich also nicht anzeigen und verändern, obwohl Startseite sogar ein Eintrag im Menü ist, also existieren müsste.

    Flower33

    (@flower33)

    Nein, daran liegt es nicht, du kannst das überall anwenden. 🙂
    Ich muss dazu sagen, dass ich das Plugin auch erst in diesem Thread kennengelernt habe, aber ich habe es mal installiert und es funktioniert.

    Die Stelle, die du in dem einen Screenshot blau markiert hat, ist nicht der Titel, den du suchst, sondern das ist der Seitentitel, der oben im Browser-Tab erscheint.

    Klicke mal die Überschrift du du verändern willst, mit der rechten Maustaste an und wähle den Menüpunkt „Element untersuchen“ aus. Was steht denn da vor deiner Überschrift? H1, H2? Und welche Klasse wird angezeigt? (class=“xyz“)

    • Diese Antwort wurde geändert vor 4 Jahre von Flower33.
    lalune7

    (@lalune7)

    hab’s jetzt in Google geladen, da sieht man es besser: http://prntscr.com/cb754k – wie gesagt, ich möchte für das Coonity Maine Coons = site title = H1 eine andere Schrift und für das site-description rechts davon die geiche Schrift wie beim Title und ein andere Größe, da seh ich aber keine Fuktion (zB p) zugewiesen. Gleiches Spiel dann nachher auch beim Menü.

    Flower33

    (@flower33)

    Könntest du die Screenshots vielleicht mit
    http://www.directupload.net/
    hochladen (keine Registrierung notwendig!) und hier verlinken,
    denn dieses Lightshot klappt bei mir nicht richtig, weil ich da mit NoScript mehrere Scripts zulassen muss und z.B. der letzte Screenshot immer noch nicht angezeigt wird.

    lalune7

    (@lalune7)

    schau mal – klappt das so?
    [URL=http://www.directupload.net/file/d/4461/bgdi3iav_png.htm][IMG]http://fs5.directupload.net/images/160828/temp/bgdi3iav.png[/IMG][/URL]

    lalune7

    (@lalune7)

    Flower33

    (@flower33)

    Man kann ja auch im Forum Bilder hochladen, aber mit dem zweiten Link über directupload hats ja auch super geklappt, danke.
    Jetzt kannst du die erste Font-Control z.B.
    #branding h1
    nennen und dasselbe eintragen, wenn dann kommt: Add CSS Selectors.
    Ebenso ginge auch
    h1#site-title
    (Im Video ging es um Klassen, da muss dem Selektor ein Punkt vorangestzet werden, bei dir ist es ein ID-Selektor, dann muss man ein „Gartenzäunchen“ voranstellen).

    Für die zweite Font-Control wählst du z.B.
    #site-description
    und trägst dasselbe ein, wenn dann kommt: Add CSS Selectors

    Im zweiten Fall fehlt da eigentlich was, wie du schon richtig sagst (kein guter Code), aber probiere es mal mit
    #site-description

    Nachdem du die beiden Font-Controls und die CSS Selektoren festgelegt hast, gehst du dann über
    Anpassen > Typography > Theme Typography
    und wählst über die jeweilige Font-Control den gewünschten Font etc. aus.

    Probiere mal, ob du das so hinbekommst.

    • Diese Antwort wurde geändert vor 4 Jahre von Flower33.
    • Diese Antwort wurde geändert vor 4 Jahre von Flower33.
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Das Thema „Schriftarten ändern bei Überschriften“ ist für neue Antworten geschlossen.