Ankündigung

Einklappen
Keine Ankündigung bisher.

Eigene Schriftart lädt nicht

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Eigene Schriftart lädt nicht

    Hallo Zusammen,

    ich möchte auf einer Website eine eigene Schriftart installieren, aber leider wird diese nicht geladen und ich finde den Fehler nicht.

    Contao 4.4
    Eclipse

    Bisherige Vorgehensweise:

    - Schriftart in fonts hochgeladen
    - customize,css erstellt und Schriftart eingebunden
    - Automatisches Laden von Schriftarten deaktiviert
    - Seitencache geleert

    Ich hab die css auch schon im Seitenlayout über externe Stylesheets eingebunden (auch ohne Erfolg)

    Was hab ich vergessen oder falsch gemacht?

    Danke für Eure Hilfe.

  • #2
    Hi,

    kann es sein, dass Deine url nicht korrekt ist?
    Müsste es nicht "files/font/..." sein?

    Gruß
    tschero
    https://www.webdesign24.biz
    https://www.mein-panorama.de

    Kommentar


    • xipoli
      xipoli kommentierte
      Kommentar bearbeiten
      Hallo tschero, danke für die schnelle Antwort. Mit dem Pfad "files/cto_layout/fonts/..." klappt es leider auch nicht.

  • #3
    Ich habe bei mir noch mal geschaut und benutze Schriften im folgenden Verzeichnis:
    Code:
    files/fonts
    und mit folgendem COde habe ich die Schriften eingebunden:
    Code:
    /* source-sans-pro-700italic - latin */
    @font-face {
      font-family: 'Source Sans Pro';
      font-style: italic;
      font-weight: 700;
      src: url('../../fonts/source-sans-pro-v11-latin-700italic.eot'); /* IE9 Compat Modes */
      src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
           url('../../fonts/source-sans-pro-v11-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../../fonts/source-sans-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../../fonts/source-sans-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
           url('../../fonts/source-sans-pro-v11-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../../fonts/source-sans-pro-v11-latin-700italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
    }
    Probiere doch noch mal ein zusätzliches
    Code:
    ../
    Gruß
    tschero
    https://www.webdesign24.biz
    https://www.mein-panorama.de

    Kommentar


    • #4
      Die Pfade im Screenshot sind richtig: Relativ aus der /css/customize.css betrachtet ist der Pfad zum Fonts Ordner: ../fonts/

      /css/customize.css
      /fonts/---DATEIEN---

      ---
      Prüfe, dass das Styling auf nur body ausreicht für die gewünschten Schriftänderungen.
      Zuletzt geändert von Tim; 26.11.2020, 07:01.
      http://www.premium-contao-themes.com

      Kommentar


      • #5
        Zitat von Tim Beitrag anzeigen
        Die Pfade im Screenshot sind richtig: Relativ aus der /css/customize.css betrachtet ist der Pfad zum Fonts Ordner: ../fonts/

        /css/customize.css
        /fonts/---DATEIEN---

        ---
        Prüfe, dass das Styling auf nur body ausreicht für die gewünschten Schriftänderungen.
        Das setzt voraus, dass er die Dateien im gleichen fonts-Verzeichnis hat wie EX, richtig?
        Ich habe - bei oben beschriebener Website - ein separates Verzeichnis mit fonts direkt in files.
        Dann stimmt das ../../ .

        Es ist also abhängig davon, wo die Font-Dateien liegen.

        Gruß
        tschero
        https://www.webdesign24.biz
        https://www.mein-panorama.de

        Kommentar


        • #6
          Dies ist der aktuelle Code:
          ..auch mit ../../fonts/ ging es nicht.

          Code:
          /* kial - latin */
          @font-face {
            font-family: 'KIAL';
            font-style: normal;
            font-weight: 100;
            src: url('../fonts/KIAL.eot'); /* IE9 Compat Modes */
            src: local('KIAL'), local('KIAL'),
                 url('../fonts/KIAL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('../fonts/KIAL.woff2') format('woff2'), /* Super Modern Browsers */
                 url('../fonts/KIAL.woff') format('woff'), /* Modern Browsers */
                 url('../fonts/KIAL.ttf') format('truetype'), /* Safari, Android, iOS */
                 url('../../fonts/KIAL.svg#SairaCondensed') format('svg'); /* Legacy iOS */
          }
          /* kiam - latin */
          @font-face {
            font-family: 'KIAM';
            font-style: normal;
            font-weight: 400;
            src: url('files/cto_layout/fonts/KIAM.eot'); /* IE9 Compat Modes */
            src: local('KIAM'), local('KIAM'),
                 url('../fonts/KIAM.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('../fonts/KIAM') format('woff2'), /* Super Modern Browsers */
                 url('../fonts/KIAM.woff') format('woff'), /* Modern Browsers */
                 url('../fonts/KIAM.ttf') format('truetype'), /* Safari, Android, iOS */
                 url('../fontss/KIAM.svg#SairaCondensed') format('svg'); /* Legacy iOS */
          }
          /* kiab - latin */
          @font-face {
            font-family: 'KIAB';
            font-style: normal;
            font-weight: 700;
            src: url('files/cto_layout/fonts/KIAB.eot'); /* IE9 Compat Modes */
            src: local('KIAB'), local('KIAB'),
                 url('../fonts/KIAB.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('../fonts/KIAB.woff2') format('woff2'), /* Super Modern Browsers */
                 url('../fonts/KIAB.woff') format('woff'), /* Modern Browsers */
                 url('../fonts/KIAB.ttf') format('truetype'), /* Safari, Android, iOS */
                 url('../fonts/KIAB.svg#KIAB') format('svg'); /* Legacy iOS */
          }
          
          h1 {font-family: 'KIAB';}
          Zuletzt geändert von xipoli; 27.11.2020, 00:43.

          Kommentar


          • #7
            ...und hier der Pfad

            Kommentar


            • #8
              https://automarkt2000.de/

              Hier die Website.

              Kann es damit zusammenhängen, dass die Website drei Startpunkte hat und jedem Startpunkt über den ThemeDesigner eine andere Akzentfarbe zugeordnet wurde?
              Zuletzt geändert von xipoli; 27.11.2020, 00:42.

              Kommentar


              • #9
                Du nutzt über all die Schrift "Oswald", lädst aber eine namens Kiat. Oswald wird von dir nicht eingebunden.
                http://www.premium-contao-themes.com

                Kommentar


                • xipoli
                  xipoli kommentierte
                  Kommentar bearbeiten
                  Hallo Tim, das wird es wohl sein, nur kann ich den "Oswald" nirgends finden. Wo könnte er sich versteckt haben?
                  Die Schriftart KIA ist die richtige, muss ich eigentlich die customize.css im Seitenlayout über externe Stylesheet noch einbinden?

              • #10
                Hallo Tim, ich hatte die Schriftart "Oswald" über den ThemeDesigner eingebunden, aber da die Schriftarten nicht mehr automatisch geladen werden sollte "Oswald" doch eigentlich nicht mehr erscheinen, oder sehe ich dies falsch? Aus einem mir unbekannten Grund wird die Schriftart " KIAL", "KIALB" und "KIAM" nicht geladen.

                Kommentar


                • #11
                  Die customize.css wird immer automatisch eingebunden.

                  Deine Schrift wird geladen, aber du musst damit auch Texte stylen. Das System bzw. der TD kennt die Schrift nicht, also musst du stylen.
                  http://www.premium-contao-themes.com

                  Kommentar


                  • #12
                    Bin für Hilfe echt dankbar, da meine Kenntnisse Grenzen haben!

                    Was fehlt oder was müsste ich sonst noch machen?
                    Meine styles.css sieht folgendermaßen aus (Nur die ersten 100 Zeilen):

                    Code:
                     /* =============================================================================
                       * body
                       * ========================================================================== */
                      
                      html,
                      body {
                      font-size: 15px;
                      }
                      
                      body {
                      color: #555;
                      font-family: 'KIAL', sans-serif;
                      line-height: 1.8rem;
                      font-weight: normal;
                      }
                      
                      /* =============================================================================
                       * font classes
                       * ========================================================================== */
                      
                      .font_serif_2,
                      .font-serif-2 {
                      font-family: 'Playfair Display', Georgia, Times, serif;
                      }
                      
                      /* =============================================================================
                       * headlines
                       * ========================================================================== */
                      
                      h1, h2, h3, h4, h5, h6 {
                      margin-bottom: 25px;
                      line-height: 1.3;
                      color: rgb(59,60,66);
                      word-wrap: break-word;
                      }
                      
                      h1 {
                          font-size:3rem;
                      }
                      
                      h2 {
                      font-size: 2.333rem;
                      }
                      
                      h3 {
                      font-size: 1.867rem;
                      }
                      
                      h4 {
                      font-size: 1.5rem;
                      }
                      
                      h5 {
                      font-size: 1.333rem;
                      }
                      
                      h6 {
                      font-size: 1.2rem;
                      }
                      
                      /* =============================================================================
                       * logo size
                       * ========================================================================== */
                      
                      .logo {
                      width: 200px;
                      height: 100px;
                      }
                      
                      /* =============================================================================
                       * logo size: sticky
                       * ========================================================================== */
                      
                      .stickyheader .logo {
                      width: 170px;
                      height: 70px;
                      }
                      
                      /* =============================================================================
                       * logo size: mobile
                       * ========================================================================== */
                      
                      @media only screen and (max-width: 767px) {
                      .stickyheader .logo,
                      .logo {
                      width: 150px;
                      height: 70px;
                      }
                      }
                      
                      /* =============================================================================
                       * logo
                       * ========================================================================== */
                      
                      .logo {
                      margin-top: auto;
                      margin-bottom: auto;
                      float: left;
                      transition: All 0.3s ease;
                      -webkit-transition: All 0.3s ease;
                      }
                      
                      .logo a {
                      background-image: url(../img/logo.png);
                      width: 100%;
                      height: 100%;
                      display: block;
                      background-repeat: no-repeat;
                      background-size: 100%;
                      background-position: left;
                      }
                    Zuletzt geändert von xipoli; 30.11.2020, 13:54.

                    Kommentar


                    • #13
                      Zitat von Tim Beitrag anzeigen
                      Die customize.css wird immer automatisch eingebunden.

                      Deine Schrift wird geladen, aber du musst damit auch Texte stylen. Das System bzw. der TD kennt die Schrift nicht, also musst du stylen.

                      Fehler gefunden.
                      Ich hab noch in der themdesigner layout._eclipse.css die Schriftart geändert und nun wird sie korrekt angezeigt.

                      Tim, vielen Dank für die Hilfe.

                      Kommentar


                      • #14
                        Noch ne Frage....
                        Nachdem ich die Font eingebunden habe, erscheint am Smartphone der Nav-Burger nicht mehr. Was kann ich da machen?
                        Danke für Eure Tipps.

                        Kommentar


                        • #15
                          Wie hier bereits mehrfach aufgezeigt, gehören eigene Stylings in die customize.css! Hier wurden Kern-Dateien überschrieben mit neuen Schriften, was zu einem Ausfall der Font-Icon-Bibliothek führt in diesem Element. Bitte sämtliche getätigen Manipulationen der Kern-Dateien zurücksetzen, damit ein supportfähiger und update-sicherer Zustand gegeben ist.

                          Im Zweifelsfall bitte einen unserer Partner beauftragen, der die Anpassungen update-sicher implementiert.
                          Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screenshot_6324.jpg
Ansichten: 1
Größe: 51,3 KB
ID: 2630

                          http://www.premium-contao-themes.com

                          Kommentar

                          Lädt...
                          X