change the font to monospace

Hi to you all,
I’am new of the Vaadin environment and I would like to use it in real applications.

Sorry for the trivial question but I cannot understand how to change the font of a widget,
something like


as inThinwire.

Many thanks

Hi, and welcome to the forum!

Almost all style changes are done using style names in Vaadin. And in order to define custom styles, you need to create a new theme.

Don’t worry, this is still very trivial, you don’t need to create a whole theme from scratch, you can inherit an existing one.

You’ll find the instructions for creating a new theme from the Book of Vaadin:

After you have created a new theme, you can start adding new styles. Here’s how:


That will add a new CSS classname for the textfield element, which you can then define in your theme CSS:

body input.v-textfield-my-monospace-style {
   font-family: monospace;

You may need a more specific selector depending on the theme you inherit, but hopefully you got the idea how styling is done.