Font issue on Edge 142 and Vaadin 24.9.6

Fix3dll · December 2, 2025, 11:11am

I am using the default theme font. However, when viewed through Edge, the font does not appear the same. There is a compatibility issue. Do I need to do any extra configuration, or is it caused by Vaadin’s default theme?

Jouni1 · December 2, 2025, 11:24am

Which theme, Lumo?

Definitely not the same font in those comparisons.

Lumo uses the system default sans-serif font, which I would expect to be fine in Edge as well.

Jouni1 · December 2, 2025, 11:29am

The font stack in Lumo is this:

github.com

vaadin/web-components/blob/main/packages/vaadin-lumo-styles/src/props/typography.css#L9


      
          /**
           * @license
           * Copyright (c) 2017 - 2025 Vaadin Ltd.
           * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
           */
          :where(:root),
          :where(:host) {
            /* prettier-ignore */
            --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
          
            /* Font sizes */
            --lumo-font-size-xxs: 0.75rem;
            --lumo-font-size-xs: 0.8125rem;
            --lumo-font-size-s: 0.875rem;
            --lumo-font-size-m: 1rem;
            --lumo-font-size-l: 1.125rem;
            --lumo-font-size-xl: 1.375rem;
            --lumo-font-size-xxl: 1.75rem;
            --lumo-font-size-xxxl: 2.5rem;

I wonder if that somehow results in a different font in Chrome vs Edge. But I would’ve expected to hear about that many, many years ago already.

Fix3dll · December 2, 2025, 11:33am

@Jouni1

Fix3dll · December 2, 2025, 11:35am

@Jouni1 i cant share another image but here:

html {
    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --lumo-font-size-xxs: 0.75rem;
    --lumo-font-size-xs: 0.8125rem;
    --lumo-font-size-s: 0.875rem;
    --lumo-font-size-m: 1rem;
    --lumo-font-size-l: 1.125rem;
    --lumo-font-size-xl: 1.375rem;
    --lumo-font-size-xxl: 1.75rem;
    --lumo-font-size-xxxl: 2.5rem;
    --lumo-line-height-xs: 1.25;
    --lumo-line-height-s: 1.375;
    --lumo-line-height-m
1.625
: 1.625;
}

from browser.