Schriften auf Website einbinden

  • Hallo ihr WordPress´ler,
    ich möchte gerne die Schrift "open sans" auf den Server legen. Ich habe einen Ordner angelegt, der "Custom-Fonts" heißt und in die CSS nachfolgendes geschreiben und trotzdem zeigen Safari und Google die Schrift nicht an, zumindest nicht in den Überschriften. Der Kunde benutzt das Theme Sidney Pro.

    Hier meine Eingabe in die CSS:
    /* custom fonts */
    @font-face {
    font-family: 'open_sansbold';
    src: url('https://flowrowfit.com/custom-fonts/O…-webfont.eot');
    src: url('https://flowrowfit.com/custom-fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://flowrowfit.com/custom-fonts/O…d-webfont.woff2') format('woff2'),
    url('https://flowrowfit.com/custom-fonts/O…ld-webfont.woff') format('woff'),
    url('https://flowrowfit.com/custom-fonts/O…old-webfont.ttf') format('truetype'),
    url('https://flowrowfit.com/custom-fonts/O…g#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'open_sansregular';
    src: url('https://flowrowfit.com/custom-fonts/O…-webfont.eot');
    src: url('https://flowrowfit.com/custom-fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://flowrowfit.com/custom-fonts/O…r-webfont.woff2') format('woff2'),
    url('https://flowrowfit.com/custom-fonts/O…ar-webfont.woff') format('woff'),
    url('https://flowrowfit.com/custom-fonts/O…lar-webfont.ttf') format('truetype'),
    url('https://flowrowfit.com/custom-fonts/O…pen_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    body, #main-nav a, #footer, #footer-logo, .footer-nav a, .footer-text{
    font-family: open_sansregular;
    }
    h1, h2, h3, h4, h5, h6{
    font-family: open_sansbold;
    }

    Habt ihr einen - und wenn ja welchen - Fehler gefunden? Ich weiß nicht mehr weiter.

    Viele Grüße,
    Nerdlady

    Man kann nicht alles haben - aber man sollte danach streben....

    • 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

  • Hier zeigt Firefox und Google Chrome die grosse FlowRow Überschrift in der Mitte in "open_sansbold".

    Allerdings existieren z.B. die Dateien /custom-fonts/OpenSans-Bold-webfont.woff2 und /custom-fonts/OpenSans-Regular-webfont.woff2 nicht auf Deinem Server, evtl. hat das bei Dir Auswirkungen.

    Und bei den Selektoren für "open_sansregular" sind auch andere CSS Regeln bzgl. Font mit im Spiel.

    Weiterhin versuchst Du auch "open_sansbold" und ein Open Sans mit falschen Anführungszeichen via fonts.googleapis.com zu laden, was nicht funktioniert.

    Und wie findet man das raus? Man öffent die Browser Console, lädt die Seite neu und betrachtet die Fehlermeldungen. Weiterhin nutzt man den Browser Inspector und schaut, welche CSS-Regel für ein Element eigentlich gilt.

    Generell: Deaktiviere Dein Cache-Plugin und leere Deine Browser-Caches zwischen jedem Test bis alles funktioniert.

    5 Mal editiert, zuletzt von b3317133 (3. Juli 2019 um 15:17)

  • Hallo B3317133,
    hm...ich habe keine Chance fonts.googleapis.com zu deaktivieren.
    Welche falschen Anführungszeichen?
    Oh man, ich habe keinen Zugriff, soll nur die Schriftarten einbinden.
    Kannst du da helfen? Ich meine das mal richtig schreiben?
    Suse

    Man kann nicht alles haben - aber man sollte danach streben....

  • Hallo B3317133,
    ich habe jetzt den Cache-Zugriff auf die beiden Seiten deaktiviert, wo die Überschriften
    ganz gruselig waren, nur sind das Impressum und der Datenschutz wie sie sein sollen.
    Nichtsdestotrotz wüsste ich gerne, wo ich noch Fehler gemacht habe.
    Vielen Dank!

    Man kann nicht alles haben - aber man sollte danach streben....

  • Man kann alles deaktivieren, wenn man Zugriff hat.

    Wenn Du keinen Zugriff hast, lass Dir welchen geben.

    Weiterhin hast Du doch was hochgeladen, also hast Du FTP-Zugang, darüber kannst Du auch einen Admin anlegen, siehe z.B. hier oder Google.

    Wie man Fehler über den Browser findet, habe ich oben beschrieben.

    Viel Erfolg mit dem Auftrag.

    Falls Du weitere Hilfe brauchst, poste ein Gesuch in der Jobbörse, kann Dir dann gern heute abend weiterhelfen, jetzt erstmal weg..

  • Hallo B3317133,
    da habe ich mich wohl missverständlich ausgedrückt. Zugang habe ich natürlich, nur nicht zu dem Theme mit seinen Grundeinstellungen.
    Nichtsdestotrotz vielen Dank.
    Nerdlady

    Man kann nicht alles haben - aber man sollte danach streben....

  • Die woff2 Dateien sind nach wie vor nicht auf dem Server vorhanden.

    Warum als WordPress-Admin kein Zugang zum "Theme mit Grundeinstellungen" vorhanden sein sollte, verstehe ich nicht.

Jetzt mitmachen!

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