Using custom fonts with Google Web Toolkit

Question

I would like to utilize a custom font in a Google Web Toolkit web application. I have tried following the documentation / code available at https://code.google.com/p/gwt-webfonts/, but I am still having problems. I did not fully understand what I needed to do.

I have:

1. Included the gwt-webfonts-0.1.jar file dependency in my project
2. Added an include dependency to my gwt.xml file:

3. Created an extension of ClientBundle:

   import com.google.gwt.dev.javac.testing.impl.MockResource;
   import com.google.gwt.dev.resource.impl.FileResource;
   import com.google.gwt.resources.client.ClientBundle;
   import com.google.gwt.resources.client.ClientBundle.Source;
   import com.google.gwt.resources.client.CssResource;
   import com.google.gwt.core.client.GWT;
   
   public interface MainClientBundle extends ClientBundle
   {
      @Source("LesJoursHeureux.otf")
      public FontResource myFont();
   
   };
   

4. In my ui.xml file, I included a reference to the font resource:

   <ui:style type='com.example.TopMenuView.TopMenuViewStyle'>
       .maintitle {
           font-family: value('myFont.getFontName');
       }
   </ui:style>
   

5. This is where I didn't exactly know what to do. In my TopMenuView.java class, I included this snippet:

   private static MainClientBundle MY_RESOURCES = GWT.create(MainClientBundle.class);
   {
       MY_RESOURCES.myFont().ensureInjected();
   }
   

6. When I try to build the project, I receive this error:

   Creating assignment for style()
        [java]  Performing substitution in node font-family : .....
        [java]  [ERROR] Could not find no-arg method named myFont in type com.example.TopMenuView_TopMenuViewUiBinderImpl_GenBundle
   

EDIT: I am using version 2.6.0 of the GWT SDK.

Answer 1

Here's a solution without any external library.

First, declare a DataResource in your MainClientBundle.java:

@MimeType("application/font-sfnt") // use appropriate mime type depending on font file format
@Source("aller/aller_rg-webfont.ttf")
DataResource allerRegularTtf(); 

Import your DataResource in your css file, using GSS (GWT >= 2.7.0):

@def ALLER_REGULAR_TTF resourceUrl("allerRegularTtf");

or using classic CssResource (GWT < 2.7.0):

@url ALLER_REGULAR_TTF allerRegularTtf;

In your .css file, declare an @font-face and use it:

@font-face {
  font-family: "AllerRegular";
  src: ALLER_REGULAR_TTF format("truetype");
}

.myClass {
  font-family: "AllerRegular";
}