mrgreen: @font-face lädt nicht

Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.
Stylesheet:

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

.titel{
color: #f1e176;
background: url(http://pascalgruenenfelder.ch/wp-content/uploads/bg/bg70_70bl.png);
        font-family: 'eveleth_regularbold';
font-size: 62px;
font-weight:bold;
}

Danke für eure Hilfe!

  1. Om nah hoo pez nyeetz, mrgreen!

    Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.

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

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lebensmittel und Lebensmittelpunkt.

    1. Danke Matthias,
      heisst Firefox würde die Schrift sowieso anzeigen (Achtung 1); auch wenn sie per Flag zur Einbindung verboten wurde? Ist eine offiziell gekaufte Web-Schrift, das müsste also gehen,
      Server-Berechtigungen sind auch alle auf 777.

      zu 2: alle meine Files sind auf dem selben Server, sollte also auch kein Problem darstellen.

      Wie weiter??

      Om nah hoo pez nyeetz, mrgreen!

      Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.

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

      Matthias

      1. Nachtrag:
        Firebug gibt die Meldung aus:

        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.

        Die Files sind aber alle hier:

        http://leegreen.ch/fonts/evelethbold-webfont.woff
        http://leegreen.ch/test.html
        http://leegreen.ch/css/test.css

        ???

        1. Hallo

          Firebug gibt die Meldung aus:

          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.

          Die Files sind aber alle hier:

          http://leegreen.ch/fonts/evelethbold-webfont.woff
          http://leegreen.ch/test.html
          http://leegreen.ch/css/test.css

          Du referenzierst sie mit vollständiger URL aber, als würden sie von einem anderen Server geladen. Benutze relative Pfade (relativ zur CSS-Ressource ../fonts/evelethbold-webfont...) statt der absoluten Angabe.

          Tschö, Auge

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
          Terry Pratchett, "Wachen! Wachen!"
          ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
          Veranstaltungsdatenbank Vdb 0.3
          1. Danke Auge, det wars! Alles funktioniert.

            Hallo

            Firebug gibt die Meldung aus:

            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.

            Die Files sind aber alle hier:

            http://leegreen.ch/fonts/evelethbold-webfont.woff
            http://leegreen.ch/test.html
            http://leegreen.ch/css/test.css

            Du referenzierst sie mit vollständiger URL aber, als würden sie von einem anderen Server geladen. Benutze relative Pfade (relativ zur CSS-Ressource ../fonts/evelethbold-webfont...) statt der absoluten Angabe.

            Tschö, Auge

            1. Hab die Lösung deines Problems gleich mal ins Wiki übernommen…

              http://wiki.selfhtml.org/index.php?title=CSS/Eigenschaften/Schriftformatierung/@font-face&curid=3023&diff=22012&oldid=22008

              Aber das nur zur Info.

              Gruß
              MathiasB

  2. @@mrgreen:

    nuqneH

    @font-face {

    font-family: 'eveleth_regularbold';
        src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot');
        src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://leegreen.ch/fonts/evelethbold-webfont.woff') format('woff'),
             url('http://leegreen.ch/fonts/evelethbold-webfont.ttf') format('truetype'),
             url('http://leegreen.ch/fonts/evelethbold-webfont.svg#eveleth_regularbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

      
    Das sollte wohl 'font-weight: bold;' heißen, zumal du es für `.titel`{:.language-css} auch so verwendest.  
      
    SVG-Schriften kannst du in die Tonne treten, braucht kein Mensch. WOFF für aktuelle Browser, WOFF2 für zukünftige, TTF für alte Androids, EOT für alte IE, s. [Can I Use @font-face Web fonts](http://caniuse.com/#feat=fontface), Reiter Sub-features.  
      
    Qapla'
    
    -- 
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    
    1. @@Gunnar Bittersmann:

      nuqneH

      SVG-Schriften kannst du in die Tonne treten, braucht kein Mensch.

      siehe Removal of support for SVG web fonts

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)