change the font to monospace

Flow
1

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

     textfield.getStyle().getFont().setFamily(Font.Family.MONOSPACE);

as inThinwire.

Many thanks

2

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:
http://vaadin.com/book/-/page/themes.creating.html

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

textfield.addStyleName("my-monospace-style");

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.