Eigene Fonts einbinden

[nikezzz]

Hallo,

ich verzweifle gerade etwas an der Einbindung eigener Fonts.

Ich habe diese bereits in die customize.css mit font-face eingebunden und auch die Stylings gesetzt.

Beim laden der Website werden die gewünschten Schriftarten auch in den Entwicklertools jeweils angezeigt.
Gerendert wird jedoch immer nur Times New Roman.
Was mache ich falsch?

Website: eclipse.columbus-verlag.de

Hier die customize.css:

 /* basis-grotesque - light */
  @font-face {
    font-family: Basis-Grotesque-Light;
    font-style: normal;
    font-weight: 100;
    src:  url('../fonts/basis-grotesque-light.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/basis-grotesque-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/basis-grotesque-light.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/basis-grotesque-light.woff') format('woff'), /* Modern Browsers */
         url('../fonts/basis-grotesque-light.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  /* basis-grotesque - medium */
  @font-face {
    font-family: Basis-Grotesque-Medium;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/basis-grotesque-medium.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/basis-grotesque-medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/basis-grotesque-medium.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/basis-grotesque-medium.woff') format('woff'), /* Modern Browsers */
         url('../fonts/basis-grotesque-medium.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  /* basis-grotesque - black */
  @font-face {
    font-family: Basis-Grotesque-Black;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/basis-grotesque-black.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/basis-grotesque-black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/basis-grotesque-black.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/basis-grotesque-black.woff') format('woff'), /* Modern Browsers */
         url('../fonts/basis-grotesque-black.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  /* mixtapro - italic*/
  @font-face {
    font-family: 'MixtaProIt';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/MixtaPro-RegularIt.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/MixtaPro-RegularIt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/MixtaPro-RegularIt.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/MixtaPro-RegularIt.woff') format('woff'), /* Modern Browsers */
         url('../fonts/MixtaPro-RegularIt.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  /* mixtapro - bold*/
  @font-face {
    font-family: 'MixtaProBold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/MixtaPro-Bold.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/MixtaPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/MixtaPro-Bold.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/MixtaPro-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/MixtaPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  /* mixtapro - regular*/
  @font-face {
    font-family: 'MixtaPro';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/MixtaPro-Regular.eot'); /* IE9 Compat Modes */
    src: 
         url('../fonts/MixtaPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/MixtaPro-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/MixtaPro-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/MixtaPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  body {
  font-family: Basis-Grotesque-Light;
  font-weight: 100;
  line-height: 1.8rem;
  }
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
  .ce_revolutionslider_text.bold, .font_headline {
  font-family: 'MixtaProBold';
  font-weight: 700;
  }
  .mainmenu ul li a  {
  font-family: Basis-Grotesque-Black;
  font-weight: 700;
  }
  .mainmenu ul li ul li a {
  text-transform: uppercase;
  }
  .smartmenu-content .mod_navigation li:not(.floatbox) {
  font-family: Basis-Grotesque-Black;
  font-weight: 700;
  }
  .mainmenu ul li ul li a  {
  font-family: Basis-Grotesque-Black;
  font-weight: 700;
  }

[Tim]

MixtraProBold fehlen noch die Files: http://eclipse.columbus-verlag.de/fi...taPro-Bold.ttf
.> 404

[nikezzz]

So, .ttf ist jetzt auch mit dabei - leider wird trotzdem immer Times New Roman gerendert. Mache ich noch was anderes falsch?

[tschero]

Hi,

in den Entwicklerwerkzeugen wird bei H1 der Font "MixtraProBold" angezeigt.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline {
font-family: MixtaProBold;
font-weight: 700;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline {
font-family: Poppins;
font-weight: 700;
}

Die Konsole liefert mehrereFehler:

downloadable font: rejected by sanitizer (font-family: "MixtaProBold" style:normal weight:700 stretch:100 src index:0) source: [URL="http://eclipse.columbus-verlag.de/files/cto_layout/fonts/MixtaPro-Bold.eot"]http://eclipse.columbus-verlag.de/fi...taPro-Bold.eot[/URL]


downloadable font: rejected by sanitizer (font-family: "Basis-Grotesque-Black" style:normal weight:700 stretch:100 src index:0) source: [URL="http://eclipse.columbus-verlag.de/files/cto_layout/fonts/basis-grotesque-black.eot"]http://eclipse.columbus-verlag.de/fi...sque-black.eot[/URL]


downloadable font: rejected by sanitizer (font-family: "MixtaProBold" style:normal weight:700 stretch:100 src index:0) source: [URL="http://eclipse.columbus-verlag.de/files/cto_layout/fonts/MixtaPro-Bold.eot"]http://eclipse.columbus-verlag.de/fi...taPro-Bold.eot[/URL]


downloadable font: rejected by sanitizer (font-family: "Basis-Grotesque-Black" style:normal weight:700 stretch:100 src index:0) source: [URL="http://eclipse.columbus-verlag.de/files/cto_layout/fonts/basis-grotesque-black.eot"]http://eclipse.columbus-verlag.de/fi...sque-black.eot[/URL]

Gruß
tschero

[Tom]

Wir hier auf Chrome sauber dargestellt. Siehe Screenshot.

[nikezzz]

Ok bei der Basis Grotesque Black konnte ich das Problem durch erneutes hochladen der Font files lösen. MixtaPro allerdings lässt sich damit nicht lösen. Was bedeutet denn genau rejected by sanitizer? Stimmt hier etwas mit der Font file nicht? was könnte das sein bzw. wie kann man das beheheben?

Die Schriftarten sind alle frisch eingekauft und extra für Web optimiert und lizensiert.

Tom auf dem Screenshot wird Times New Roman gerendert. Mann kann den Unterschied beim C deutlich sehen

[Tim]

rejected by sanitizer

Deutet auf eine defekte Datei hin oder der gesamte Schnitt der Schrift ist invalide. Lade die Dateien einmal frisch hoch. Falls die Dateien via Dateiverwaltung hochgeladen wurde, bitte einmal ein FTP Programm nutzen. Alternativ eine andere Schriftart nutzen.

[nikezzz]

Ok funktioniert jetzt. Lag am Ende doch an der Schrift. Habe Sie nochmal neu gekauft bei einem anderen Anbieter und diese funktioniert.

Vielen Dank