RichTextArea: changing default font and font size

I am trying to change the default font and default font size of a RichTextArea I am using in my webapp.

I have a custom theme with the following css. The background color of the app and the progressindicator are both working as expected according this css. However, it has no effect on the RichTextArea I am using. Why?

Alternatively, I also try to addStyleName (“mystyle”) to two components: one is a TextField, the other is a RichTextArea. It works fine with the TextField component, but “mystyle” has no effect on the RichTextArea component. Why?

Please advise how to change the default attributes of the editor in a RichTextArea. Thank you very much.

The CSS of custom theme:


@import url(…/reindeer/styles.css);

.v-app {
background: yellow;
}

/* To hide progressindicator used for polling */
.v-progressindicator {
display: none;
}

.mystyle {
font-family: fantasy;
font-style: italic;
font-size: 50px;
font-weight: bolder;
line-height: 30px;
}

.v-richtextarea .gwt-RichTextArea {
background: #fff;
border: none;
font-family: arial;
font-style: italic;
font-size: 50px;
font-weight: bolder;
}


Because the rich text is rendered inside an
iframe
.

You would have to write your own version of the
VRichTextArea
client-side widget.