Schrift einbinden in html / Firefox erkennt es nicht

[Jala]

Hallo,

ich habe in eine ander Schrift benutz. Diese habe ich in den Ordner gelegt wo auch Bilder zu finden sind. Eigentlich läuft auch alles gut, Safari erkennt alles ohne Problem, aber Firefox nicht.
Es handelt sich um einen Inhaltlichen Text und um die Links.
Die Schriftart für den Inhalt erkennt Firefox nur die Links stellt er in einer falschen Schrift dar.

Hier das ist mein Code:

[HTML]<style type="text/css"> @font-face {
      font-family:apercu;
      src:url(apercu.otf), url(apercu.otf);
  }
  @font-face {
      font-family:apercu_bold;
      src:url(apercu_bold.otf), url(apercu_bold.otf);
  }

  {
      html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
 
  }
  #info {
      position: absolute;
      bottom: 50px;
      left: 15px;
      font-size: 12px;
      font-family:'Apercu';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info2 {
      position: absolute;
      bottom: 50px;
      left: 90px;
      font-size: 12px;
      font-family:'Apercu';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info3 {
      position: absolute;
      bottom: 50px;
      left: 145px;
      font-size: 12px;
      font-family:'Apercu';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info4 {
      position: absolute;
      bottom: 50px;
      left: 220px;
      font-size: 12px;
      font-family:'Apercu';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #eins {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12px;
      font-family:'Apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: auto;
      z-index: 2;
      overflow: auto;
  }
  #zwei {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12px;
      font-family:'Apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: auto;
      z-index: 2;
      overflow: auto;
  }
  #drei {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12px;
      font-family:'Apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: auto;
      z-index: 2;
      overflow: auto;
  }
  #vier {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12px;
      font-family:'Apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: auto;
      z-index: 2;
      overflow: auto;
  }
}
</style>[/HTML]

Inhalt text: info1, info2, info3, info4
Die Links:eins; zwei; drei; vier

 

[Jala]

Ok, ich habe nun schon einen Fehler gefunden. Jetzt zeigt Firefox zwar die richtige Schrift an, aber nun ist alles bold. Safari macht es richtig!

<style type="text/css">
  @font-face {
      font-family:apercu_regular;
      src:url(apercu_regular.otf), url(apercu_regular.otf);
  }
  @font-face {
      font-family:apercu_bold;
      src:url(apercu_bold.otf), url(apercu_bold.otf);
  }


  {
      html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
     
  }
  #info1 {
      position: absolute;
      bottom: 50px;
      left: 15px;
      font-size: 12pt;
      font-family:'apercu_regular';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info2 {
      position: absolute;
      bottom: 50px;
      left: 120px;
      font-size: 12pt;
      font-family:'apercu_regular';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info3 {
      position: absolute;
      bottom: 50px;
      left: 195px;
      font-size: 12pt;
      font-family:'apercu_regular';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #info4 {
      position: absolute;
      bottom: 50px;
      left: 295px;
      font-size: 12pt;
      font-family:'apercu_regular';
      src:url (apercu_regular.otf);
      color: #50afdb;
      text-align: left;
  }
  #eins {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12pt;
      font-family:'apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: 15pt;
      z-index: 2;
      overflow: auto;
  }
  #zwei {
      position: absolute;
      bottom: 96px;
      left: 15px;
      font-size: 12pt;
      font-family:'apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: 15pt;
      z-index: 2;
      overflow: auto;
  }
  #drei {
      position: absolute;
      bottom: 80px;
      left: 15px;
      font-size: 12pt;
      font-family:'apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: 15pt;
      z-index: 2;
      overflow: auto;
  }
  #vier {
      position: absolute;
      bottom: 96px;
      left: 15px;
      font-size: 12pt;
      font-family:'apercu_bold';
      src:url (apercu_bold.otf);
      color: #50afdb;
      text-align: left;
      line-height: 15pt;
      z-index: 2;
      overflow: auto;
  }
}
</style>