Home → Contao →

Fehler: font-display

• Edit

D.

04 Oct, 2021 02:33 PM

Produkt: Luxe Contao
Contao-Version: 4.12.1

Wie kann man der Schriftart "RockSolid Icons" ein font-display UPDATESICHER hinzufügen?
Wenn der Wert in der main.css unter @font-face hinzugefügt wird, wird er von Lighthouse gefunden und ausgewertet. Doch bei einem Update wird das vermutlich überschrieben.
Ein Eintrag in die custom.css wird allerdings ignoriert. Wie geht es richtig?
Vielen Dank für eure Bemühungen.

1. Support Staff 1 Posted by RockSolid Theme... on 05 Oct, 2021 11:53 AM

   

   Vielen Dank für Ihre Frage.

   Mit folgendem CSS-Code sollten Sie die Schriftart in der custom.css-Datei überschreiben können:

   @font-face {
       font-family: "RockSolid Icons";
       src: url("../fonts/rocksolid-icons.woff");
       font-display: swap;
   }
   

   • Edit

2. 2 Posted by D. on 05 Oct, 2021 08:17 PM

   

   Leider funktioniert das noch nicht – Lighthouse akzeptiert "font-display: swap;" nicht.
   Siehe Anhang. Vielen Dank für eure Bemühungen.

   • Screenshot_2021-10-05_221545.jpg 45.1 KB
   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 06 Oct, 2021 08:11 AM

   

   Hierbei scheint es sich um einen Fehler in Lighthouse zu handeln. Ihr @font-face-Code aus der custom.css wird jedenfalls angewendet, das können Sie testen indem Sie z. B. size-adjust: 50%; hinzufügen und die Größe der Icons prüfen.

   • Edit

4. 4 Posted by Zille-Foto on 06 Oct, 2021 07:30 PM

   

   Danke für die Antwort.
   verwunderlich ist es dennoch, denn in meiner custom.css werden die
   Definitionen

   @font-face {
      font-family: 'Cormorant Garamond';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.eot');
   /* IE9 Compat Modes */
      src: local(''),
   url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.eot?#iefix')
   format('embedded-opentype'), /* IE6-IE8 */
   url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.woff2')
   format('woff2'), /* Super Modern Browsers */
   url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.woff')
   format('woff'), /* Modern Browsers */
           url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.ttf')
   format('truetype'), /* Safari, Android, iOS */
   url('/files/luxe/fonts/cormorant-garamond-v10-latin-500.svg#CormorantGaramond')
   format('svg'); /* Legacy iOS */
   }
   @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/files/luxe/fonts/montserrat-v18-latin-regular.eot'); /*
   IE9 Compat Modes */
      src: local(''),
   url('/files/luxe/fonts/montserrat-v18-latin-regular.eot?#iefix')
   format('embedded-opentype'), /* IE6-IE8 */
           url('/files/luxe/fonts/montserrat-v18-latin-regular.woff2')
   format('woff2'), /* Super Modern Browsers */
           url('/files/luxe/fonts/montserrat-v18-latin-regular.woff')
   format('woff'), /* Modern Browsers */
           url('/files/luxe/fonts/montserrat-v18-latin-regular.ttf')
   format('truetype'), /* Safari, Android, iOS */
   url('/files/luxe/fonts/montserrat-v18-latin-regular.svg#Montserrat')
   format('svg'); /* Legacy iOS */
   }
   font-display: swap; von Lighthouse erkannt. Hingegen wird

   |@font-face { font-family: "RockSolid Icons"; src:
   url("../fonts/rocksolid-icons.woff"); font-display: swap; }|

   nicht erkannt und oben gezeigte Warnung ausgegegeben. Hm …

   freundliche Grüße
   Detlef Zille

   Reicker Straße 90
   01237 Dresden
   Tel.: 0351 459 1333
   www.zille-foto.de <https://zille-foto.de/>

   • Edit