How to get Google Fonts to apply to GWT widgets?
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 some开发者_开发技巧thing fairly fundamental here. Can anyone help?
Thanks Neil
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:
- 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.
- 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.
精彩评论