Fehler: font-display

D.'s Avatar

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

    RockSolid Themes's Avatar

    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;
    }
    
  2. 2 Posted by D. on 05 Oct, 2021 08:17 PM

    D.'s Avatar

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

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

    RockSolid Themes's Avatar

    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.

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

    Zille-Foto's Avatar

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

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac