Marcus Strauß: Problem mit @font-face

SELF-Forum

Problem mit @font-face

Marcus Strauß (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Guten Morgen, Ich habe ein Problem mit @font-face. Ich habe die die Forensuche und google deswegen schon bemüht. In der Forensuche bin ich auch fündig geworden, was mein Problem betrifft. Leider hilft es bei mir nicht.

mein Problem ist das gleiche wie in diesem Thread. https://forum.selfhtml.org/self/2014/sep/30/font-face-laedt-nicht/1622345#m1622345

Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource auf http://leegreen.ch/fonts/evelethbold-webfont.eot zu lesen. Dies kann gelöst werden, indem die Ressource auf die gleiche Domain geschoben wird oder CORS aktiviert wird.

Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face, v.a. die ersten beiden „Achtung“.

die habe ich beachtet. Ich benutze relative Pfadangaben. Es steht wie folgt in meiner *.css Datei.

@font-face
{
	font-family: 'Nosifer';
    src: url("../fonts/NosiferCaps-Regular.ttf") format("truetype");
}

Das komische ist, in dem Entwicklungstool welches ich verwende, werden mir die Schriften in der Vorschau geladen und es wird so angezeigt wie ich es haben will.

öffne ich die Webseite im Browser (Chrome) unter http://localhost/ oder im Web bekomme ich die Cross-Origin-Anfrage blockiert: Fehlermeldung wenn ich die Console öffne.

Mir ist auch bekannt, dass nicht alle Schriften geladen werden können, weil interen Einstellungen in den Schriften das verhindern. NosiferCaps ist aber eine Freie Schrift, die Google und fontsquirrel zum download anbietet.

Wenn ich die Schrift NosiferCaps im header des Documents unter dem link Element wie folgt verlinke.

<link href ="http://fonts.googleapis.com/css?family=Nosifer" rel ="stylesheet" type ="text/css">

dann wird mir das Schriftbild angezeigt. verwende ich jedoch @font-face in einer *.css Datei wird die die Cross-Origin-Anfrage blockiert: Fehlermeldung ausgelöst.

auf meiner Webseite könnt ihr das Problem nachvollziehen. wo liegt da das Problem.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit @font-face

    Alfons der Viertelvorzwölfte (Versionen)
    +3 Informationen zu den Bewertungsregeln

    problematische Seite 

    @font-face
{
	font-family: 'Nosifer';
    src: url("../fonts/NosiferCaps-Regular.ttf") format("truetype");
}

    Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource

    Du benutzt in deiner Hauptseite Frames (gruselig …) zusammen mit dem Attribut sandbox. sandbox sorgt alleine mit seinem Auftauchen dafür, dass der Inhalt des Elements selbst bei gleicher Domain als eigenständig betrachtet wird, d.h. so, als stamme er von einem anderen Server; entsprechend wird der Zugriff auf die Schrift blockiert.

    Siehe https://www.w3.org/wiki/HTML/Elements/iframe

    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Problem mit @font-face

      Marcus Strauß Homepage des Autors
      – Informationen zu den Bewertungsregeln

      problematische Seite

      danke für den hinweis... hast mir echt geholfen. entweder sandbox komplett raus oder das Attribut allow-same-origin setzten , dann gehts.

      Du benutzt in deiner Hauptseite Frames (gruselig …) zusammen mit dem Attribut sandbox.

      also ohne sandbox nicht mehr (gruselig...) oder meinst du Frames (gruselig...)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit @font-face

        Julius
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Hallo Marcus,

        Du benutzt in deiner Hauptseite Frames (gruselig …) zusammen mit dem Attribut sandbox. also ohne sandbox nicht mehr (gruselig...) oder meinst du Frames (gruselig...)

        Ich nehme mal stark an, das „der König“ sich auf die Verwendung von Frames bezieht. Aus diversen Gründen (der wichtigste dürfte die Barrierefreiheit sein) sollte man möglichst auf Frames verzichten. Da sich die eingebundenen Inhalte (Navigation und Hauptinhalt) unter deiner Kontrolle befinden, kannst du sie auch anders einbinden. iFrames sind dazu gedacht externe Inhalte einzubinden, also beispielsweise eine Karte von Openstreetmap.org.

        Außerdem sind mir ein paar Auffälligkeiten ins Auge gefallen:

        • Doctype <!doctype html> fehlt
        • Warum ISO-8859-1 als Kodierung? Ohne besonderen Grund würde ich immer UTF-8 benutzen; außerdem fehlt <meta charset="DeinZeichenSatzXY">
        • Du benutzt veraltete (i) oder proprietäre (marquee) Elemente und veraltete Attribute wie align="center".
        • Bei den Meta-Daten würde ich aufräumen, zumindest keywords ist heutzutage unnötig, generator auch (wozu sollte man einem potenziellen Angreifer auf dem Silbertablett mitteilen, welches System man benutzt?!) und unter author würde ich an deiner Stelle deine E-Mail-Adresse nicht im Klartext bzw. unverschleiert veröffentlichen (es sein denn, du sammelst Spam)
        • die Seite ist nicht mal ansatzweise responsitive

        Gruß
        Julius

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Problem mit @font-face

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          problematische Seite

          Hallo Julius,

          • Du benutzt veraltete (i) […] Elemente

          i und b wurden umgedeutet.

          Bis demnächst
          Matthias

          --
          Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Problem mit @font-face

            Julius
            – Informationen zu den Bewertungsregeln

            Hallo Matthias,

            • Du benutzt veraltete (i) […] Elemente

            i und b wurden umgedeutet.

            Interessant, das wusste ich noch nicht. Also kann ich statt eines span-Elements mit der passenden kursiven Formatierung dann das i-Element (sicherheitshalber passenendes CSS dazu) verwenden? Semantisch korrekt, weil beide keine besondere Bedeutung haben?

            Ich überlege gerade, wo ich das „Finger weg von i und b – die sind ganz böse!!!“ in meinem Kopf her haben könnte. War diese Einstellung vielleicht 2007 der Stand der Entwicklung als die (jetzt ver-)alte(-te) Doku 8.1.2 erschien?

            Gruß
            Julius

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln