Difference in font rendering between Vaadin Flow application and Vaadin docs

General
1

I’ve noticed for a while now that there’s a slight difference between how text of components is rendered in the examples of the Vaadin documentation and an actual application. Now I created a new project via Create a new Vaadin app: configure views and theme to confirm that it’s not just some custom styles in my application that cause this.

This is a screenshot from the Vaadin documentation:
From the Vaadin documentation

And this is a screenshot from a Vaadin Flow application:
From a Vaadin Flow application

Especially in the label there’s a clear difference. I tried to examine the CSS, but font-size and font-weight seem to be the same in both cases. I’m using Firefox btw.
Any ideas what’s causing this?

2

Without actually inspecting, my assumption is that the -webkit-font-smoothing and -moz-osx-font-smoothing CSS properties have different values in those contexts.

3

After some quick experiments (manipulating the live pages and a minimal standalone HTML), they don’t seem to have an effect.
Plus, those properties seem to be part of the Lumo theme of every component anyway, so they should (and from what I can tell are) the same in both contexts.
Also, those properties are always struck through when inspecting in Firefox, which seems to imply they’re not applied anyway?

This is the standalone HTML I used to test:

<html>
<head>
<style>
html {
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div>Test (normal)</div>
<div class="smoothed">Test (font-smoothing)</div>
</body>
</html>
4

Why I’m asking this: The boldness of text just seems to be missing in Firefox for font-weight 500 (which is primarily used), except in the documentation, so there must be a way to also achieve this in a Vaadin application. Chrome seems to look just fine (and the same) in both cases.

5

See also Grid: bold header row - #34 by supportive-urial for similar discussion, may be useful.

6

Thanks, that lead me to the answer that it’s actually a different font in both cases.

So the font-family is always the same: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

However, in the Vaadin app the actually used font is “Segoe UI”, but in the documentation it is “Roboto” (for me on Windows anyway). That’s because the documentation embeds that font from Google and my system doesn’t have it, so Firefox just picks the next one in the list.

1 Like