How to change the font size dynamical

Hi, in my application I have an IntegerField that if I select plus or minus it should increase or decrease the font size does anyone have any idea how to do this? I tried doing UI.getCurrent().getElement().getStyle().set(‘font-size’, event.getValue().toString()) but it doesn’t work. Can anyone give me some suggestions?

Didn’t test this one, but sounds much like it needs to be set in HTML element instead to apply. This is the case for theme at least.

You can try if this works:

UI.getCurrent().getPage().executeJs(“document.documentElement.setAttribute(‘style’, ‘font-size: 1.5rem’)”);

it depends on what the desired effect is. The font-size on the html element determines the size of all vaadin components, so if you want to zoom everything in/out, that should do it yeah.

But if you only want to adjust text font size, and not affect vaadin components, the body element, which you’re targeting with UI.getCurrent().getElement(), would be correct (OR you could adjust the value of a custom css property and use that in those parts of the UI whose font size you want to change)

there’s also --lumo-font-size-m, -s and -l css properties that are used in various parts of vaadin components, if you specifically want to tweak the font size (but not other scaling) in those

This one calls for a cookbook recipe… Would be a useful feature in many apps.

yeah – in that case I think it would make sense to make it specifically text zoom, since zooming the whole UI is easy enough to do with browser features

I have to change the size of the whole interface and not of the single component. So the initial solution you gave me works. Thank you! I was already using a call to change the theme of vaadin UI.getCurrent().getPage().executeJs("document.documentElement.setAttribute(‘theme’, ’ " + theme + “')”);
Can I also add the style in the same call?

Should work to just add another js statement after that one

UI.getCurrent().getPage().executeJs(“document.documentElement.setAttribute(‘theme’, '” + theme + “', ‘style’, ‘font-size:18px’)”); I tried that but it doesn’t seem to work

you need a separate setAttribute call, but I think you can do it in the same executeJS

something like

    document.documentElement.setAttribute('theme', ' " + theme + "');
    document.documentElement.setAttribute('style', 'font-size:18px');

Thank you!