Probleme beim Einbinden von CSS und Fonts

  • Nabend zusammen,

    ich bin der neue in der Straße und bin auf dieses Forum gestoßen weil ich bei meinen ersten Gehversuchen mit Wordpress an ein paar Stellen hängen bleibe. Dazu noch folgendes: Bisher habe ich meine Seiten immer selbst mit eigenen Scripten auf Basis von PHP und MySQL dynamisch gehalten, das war kein Problem. Jetzt wollte ich aber für ein bestimmtes Projekt Wordpress ausprobieren, da bei diesem mehrere Autoren Beiträge veröffentlichen sollen. Generell bin ich also mit der Erstellung von Websites vertraut.

    Die Umsetzung klappt bisher auch recht gut, ein paar Dinge wollen aber nicht wie ich will und ich denke, dass diese in einer gewissen Abhängigkeit stehen.

    So habe ich mit css-Dateien in einem eigenen Ordner Probleme. Zunächst mit der bekannten Fehlermeldung, dass keine Templates vorhanden wären. Wenn ich die css-Datei in das Hauptverzeichnis verschiebe, funzt alles wunderbar. Nur bin ich da ein wenig "neurotisch", und habe gerne Ordnung in meinen Verzeichnissen. Alles einfach in einen Ordner werfen ist nicht so mein Fall. Nur egal was ich versuche, in einem Unterordner bekomme ich das css nicht eingebunden. Egal ob ich dies im header mit "<?php echo get_stylesheet_directory_uri(); ?>" oder mit "echo bloginfo('stylesheet_directory'); ?>" versuche, keine Chance.

    Das andere Problem bezieht sich auf das einbinden von eigenen Fonts. Die hatte ich bisher auch immer in einem eigenen Ordner. Bei meiner Suche im Netz bin ich immer wieder darauf gestoßen, dass diese im gleichen Ordner wie die css-Datei liegen müssen - und da ich diese ja nicht in einen Unterordner bekomme, müssen die Fonts auch ins Root-Verzeichnis...Grummel. Aber auch hier bekomme ich sie nicht eingebunden. Normalerweise mache ich das so (den Unterordner habe ich jetzt schon entfernt):

    Code
    @font-face {
        font-family: 'lobster';
        src: url('lobster-webfont.eot');
        src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
             url('lobster-webfont.woff') format('woff'),
             url('lobster-webfont.ttf') format('truetype'),
             url('lobster-webfont.svg#robotolight') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    Aber das will so nicht.

    Wie gesagt, ich hätte alles gerne in eigenen Ordnern.

    Ist das irgendwie machbar?

    Die Suche hier habe ich schon genutzt, habe aber generell nur wenige Suchergebnisse erhalten, und bei denen war nichts für mein Problem dabei...


    Besten dank

    Frederic

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Deine CSS kannst du über die functions.php ins Theme einbinden:

    PHP
    function own_scripts_loader() {
      wp_enqueue_style('own-style', get_template_directory_uri() . '/css/style.css', array(), '', 'all' );
    }
    add_action('wp_enqueue_scripts', 'own_scripts_loader', 1);

    Und wg. der Font, setz einfach den richtigen Ordner ein:

    Code
    @font-face {
        font-family: 'lobster';
        src: url('fonts/lobster-webfont.eot');
        src: url('fonts/lobster-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/lobster-webfont.woff') format('woff'),
             url('fonts/lobster-webfont.ttf') format('truetype'),
             url('fonts/lobster-webfont.svg#robotolight') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Danke...

    Das erste werde ich mal ausprobieren, bei den Fonts hatte ich oben ja geschrieben, dass ich diese ebenfalls in den Root-Ordner gepackt habe, weil das mit dem eigenen Ordner nicht funktioniert hatte...aber auch im Root wurden die Schriften nicht verwendet...

    Muss ich die functions.php an einer gewissen Stelle einbinden oder geschieht das automatisch wenn diese vorhanden ist? Ich habe in den anderen Themes nichts entsprechendes gefunden....

    Einmal editiert, zuletzt von Furchensumpf (29. Oktober 2015 um 21:18)

  • Hallo,

    ich mag auch gerne Ordnung in meinen Theme-Ordnern. Aber gefühlsmäßig würde ich die Stylesheet-Datei und auch die functions.php auf der obersten Ebene des Theme-Ordners belassen. (Wenn hier mit meinem Gefühl was nicht stimmt, freue ich mich über ergänzende und belehrende weitere Antworten.)

    Dann eher, wenn es nötig sein sollte, Teile des Stylesheets in eigene Dateien auslagern, die dann auch in einem css-Unterordner sein können (bezüglich Browser-Hacks wird das auch im WP-Codex empfohlen). Bilder im eigenen Ordner sind eh klar. Mit Schriften dürfte das auch kein Problem sein, die werden doch im html-Header referenziert – dort den relativen Pfad zum Stylesheet-Directory angeben.
    Und ich mache es seit einiger Zeit so, dass ich aus der functions.php alles das in eigene Dateien (in einem Unterordner library) auslagere, was 2 oder 3 Zeilen übersteigt.

    Gruß
    helix

  • ich hab das so gelöst ..

    in der header.php folgende Zeile zwischen <head> und </head> eingefügt


    dann im style.css des jeweiligen Theme`s die Schriftart eingetragen ..

    Verschiedene Google Schriftarten findest du hier

    Zuerst suchst du dir eine Schrift aus, legst diese mit einen Klick auf "Add to Collection" in deinen "Warenkorb".
    Rechts unten hast dann einen Button "Use" da klickst du drauf und befolgst die Anweisungen .. im Prinzip das gleiche wie ich hier bereits geschrieben habe.
    Sollte kein Problem sein ..

    lg
    Michael

  • Ich verwende aber keine Schriften, die ich von anderen Servern einbinden muss. Da wird der Font dann vom Anbeiter rausgenommen und ich steh dann da.


    wennst das bemerkst, suchst dir eine neue aus verlinkst diese und gut ists. Dauert keine 5 Minuten :)
    Bedenke das jeder User der deine Page besucht diese andere Schriftart am Rechner haben muss damit diese richtig dargestellt wird. Das umgehst mit Google Fonts.
    Schwierig wirds bei Linux oder Mac User da die meist andere Schrift-Art-System haben, welche genau weiss ich selber nicht.

  • Wieso muss dieser den Font auf seinen Rechner haben? Ich kann sie auch von meiner Seite anbieten, diese wird dann genauso eingeunden. Es besteht doch in der Hinsicht kein Unterschied ob sie von meinem Server oder von einem Fremden eingebunden wird - nur dass ich eine bessere Kontrolle habe...

  • Wieso muss dieser den Font auf seinen Rechner haben? Ich kann sie auch von meiner Seite anbieten, diese wird dann genauso eingeunden. Es besteht doch in der Hinsicht kein Unterschied ob sie von meinem Server oder von einem Fremden eingebunden wird - nur dass ich eine bessere Kontrolle habe...

    na dann :)

    schau mal da ... aber wie gesagt Linux User haben keine TTF Schriftarten, Mac User glaub ich auch nicht ..
    http://wiki.selfhtml.org/wiki/CSS/Eigen…rung/@font-face



    http://wiki.selfhtml.org/wiki/CSS/Eigen…rung/@font-face

    Einmal editiert, zuletzt von michl70 (30. Oktober 2015 um 12:13)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!