Eigene Schriftart lädt nicht

[xipoli]

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.

[tschero]

Hi,

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

Gruß
tschero

[xipoli]

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

[tschero]

Ich habe bei mir noch mal geschaut und benutze Schriften im folgenden Verzeichnis:

files/fonts

und mit folgendem COde habe ich die Schriften eingebunden:

/* 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

../

Gruß
tschero

[Tim]

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.

[tschero]

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

[xipoli]

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

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

[xipoli]

...und hier der Pfad

[xipoli]

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?

[Tim]

Du nutzt über all die Schrift "Oswald", lädst aber eine namens Kiat. Oswald wird von dir nicht eingebunden.

[xipoli]

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?

[xipoli]

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.

[Tim]

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.

[xipoli]

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):

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

[xipoli]

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.

[xipoli]

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.

[Tim]

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.