Problem mit @font-face

[Marcus Strauß]

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.