1

I am writing a GWT application in which everything on the screen is in some widget or other, i.e. there's nothing there from the HTML file in ordinary HTML.

I would like all the text to appear in a certain Google web font. My question is, how to apply the font to the widgets in some kind of automatic way? If I put the font-family CSS in the body{}, none of the widgets picks up the font, but ordinary HTML does (and, like I say, there isn't any of that).

On the other hand, I want to avoid this kind of thing, which is what I've got at the moment, in my stylesheet:

.gwt-Label, .gwt-TextBox, .gwt-Button, .gwt-DialogBox .Caption, .gwt-EveryOtherKindOfWidget....
{
    font-family: Quattrocento, serif;
}

So my question is, how can I get everything to inherit this font? I feel I must be missing something fairly fundamental here. Can anyone help?

Thanks Neil

Neil Sands
  • 173
  • 4
  • 18

1 Answers1

1

So there are a couple of issues here:

The default GWT theme (standard) includes the standard.css file. This file contains style definitions for all widgets. The theme is defined in your module's xml file:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

There are different ways on how to override widget styles:

  1. copy the standard.css file, include it as a CSSResource in a ClientBundle in your app and remove the inherit line from your module's xml file.
  2. add your stylesheet which overrides the widget styles defined in the standard.css after the inherit line in your module's xml file (see here for more details)

i.e:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

Looking at the standard.css stylesheet you will see that the widgets don't define any fonts. It is actually inherited from the body style.

excerpt from the standard.css:

body, table td, select {
    font-family: Arial Unicode MS,Arial,sans-serif;
    font-size: small;
}

So you probably only have to override the body part in your custom stylesheet with the google fonts and all widgets will inherit it.

Here comes the second issue: Loading the google fonts isn't that easy because of stylesheet precedence/inheritance.
This wiki describes how to load the google fonts into your GWT app.

Community
  • 1
  • 1
Ümit
  • 17,379
  • 7
  • 55
  • 74