Ankündigung

Einklappen
Keine Ankündigung bisher.

Eigene Fonts einbinden

Einklappen
Dieses Thema ist geschlossen.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Eigene Fonts einbinden

    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:

    Code:
     /* 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;
      }

  • #2
    MixtraProBold fehlen noch die Files: http://eclipse.columbus-verlag.de/fi...taPro-Bold.ttf
    .
    > 404
    http://www.premium-contao-themes.com

    Kommentar


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

      Kommentar


      • #4
        Hi,

        in den Entwicklerwerkzeugen wird bei H1 der Font "MixtraProBold" angezeigt.
        Code:
        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:
        Code:
        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
        https://www.webdesign24.biz

        Kommentar


        • #5
          Wir hier auf Chrome sauber dargestellt. Siehe Screenshot.
          *********************
          Neu: Kostenloser Contao Installer 3.0
          *********************
          Contao und Erweiterungen in wenigen Sekunden laden, installieren und updaten - ohne Composer oder Contao Manager.

          Kommentar


          • #6
            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

            Kommentar


            • #7
              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.
              http://www.premium-contao-themes.com

              Kommentar


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

                Vielen Dank

                Kommentar

                Lädt...