Fonts bolder in production mode

Flow
1

Hi, the fonts when building in production mode and not are not similar. See image below:

Why is this? Here’s my maven production profile set in my project’s .pom

<profiles>
        <profile>
            <!-- Production mode can be activated with either property or profile -->
            <id>production-mode</id>
            <activation>
                <property>
                    <name>vaadin.productionMode</name>
                </property>
            </activation>

            <properties>
                <vaadin.productionMode>true</vaadin.productionMode>
            </properties>

            <dependencies>
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>flow-server-production-mode</artifactId>
                </dependency>
            </dependencies>

            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>flow-maven-plugin</artifactId>
                        <version>1.3.0.alpha3</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>copy-production-files</goal>
                                    <goal>package-for-production</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-war-plugin</artifactId>
                        <version>3.1.0</version>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
2

Hello. This looks like it is related to https://github.com/vaadin/flow/issues/4601

3

Pekka Hyvönen:
Hello. This looks like it is related to https://github.com/vaadin/flow/issues/4601

Hi Pekka,

the issue looks like they’re trying to use other fonts. We are using Vaadin’s default font. Just the font-weight rendition seems different.

4

I’m having the same issue - while vaadin.productionMode is set to false everything looks ok. When set to true, and after application is bundled, fonts looks different, bold text is especially blurry.

(Left side of attached picture is productionMode=false, right side is productionMode=true)
17546548.png

5

Not sure if that is related, but I have issue with loading css in production mode… See: https://vaadin.com/forum/thread/17511115/vaadin-12-with-spring-boot-production-mode

What is the URL of failed requests (check with chrome developer console)?

6

There were no failed requests. But in the meantime, I’ve found the real reason of this…

Lumo theme defines:
–lumo-font-family: -apple-system, BlinkMacSystemFont, “Roboto”, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

On my system (Windows 10), there is no “Roboto” font installed locally, but “Segoe UI” is installed. In development mode (productionMode=false) the application does not import any web font, so the font used on the web page is Segoe UI (and Segoe UI Semibold). I have confirmed this using chrome DevTools.

But in production mode (productionMode=true), application has automatically imported web font from: https://fonts.googleapis.com/css?family=Roboto:300,400,500 Notice that it did not requested semibold font weight 600!
So the font used on the web page is Roboto (and Roboto Medium). This would explain why fonts looks different and also blurry.

I would consider this a bug, since development and production mode are not consistent regarding web fonts imports?

7

I think this is a bug.
At least this is confusing behavior.

Please make a ticket.

8

I’ve opened [new ticket]
(https://github.com/vaadin/flow/issues/5248).

9

Thanks.