GWT/GXT Theming Part 3 – Adding Custom Fonts

Okay, a softball for today. In order to add custom fonts to your application on top of Sencha’s themebuilder, you can take a few different approaches.

1. You can add the font type to an external css file and pass in the font-family into your .theme file
2. You can add custom appearance classes for each widget to get a particular font. See here.

I ultimately settled on the first approach because it saved me the time of having to create a separate appearance class for each widget I wanted to style. That and Sencha’s .theme file actually has a “text” value for most of its widgets. It’s probably one of the most customizable aspects of the themebuilder.

Here’s how I did it:

theme {

  name = "customTheme"
  basePackage = "com.example"

  ...

  // CUSTOM FONTS
  /* TRADE GOTHIC/ARIAL */
    customSmallFont = util.fontStyle("\'TradeGothicW01-BoldCn20 675334\', Arial, Helvetica, sans-serif", "13px", "#000000", "normal")
}

You can see here that I escaped the single quotes for a font-family that contained spaces. This font string gets compiled through and actually makes it out to the ultimate .css that styles various widgets. Prior to using single escaped quotes, I just entered in the entire string in double quotes, which compiled and built a theme, but did not make it through to the .css in the end.

If your font doesn’t have spaces, you can simply use the entire string, but escaping with single quotes seems to work well. Here’s what my external .css file looks like at the end:

/* my external css file */
@font-face {
    font-family: 'TradeGothicW01-BoldCn20 675334';
    src: url('fonts/tradegothicltpro-bdcn20-webfont.eot');
    src: url('fonts/tradegothicltpro-bdcn20-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/tradegothicltpro-bdcn20-webfont.woff') format('woff'),
         url('fonts/tradegothicltpro-bdcn20-webfont.ttf') format('truetype'),
         url('fonts/tradegothicltpro-bdcn20-webfont.svg#TradeGothicW01-BoldCn20 675334') format('svg');
    font-weight: normal;
    font-style: normal;

}

That’s all there is to it!