CODEWITHSUNDEEP
javagwt
ADP123
ADP123

Reputation: 63

Using custom fonts with Google Web Toolkit

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.

Upvotes: 6

Views: 2996

Answers (2)

Craigo
Craigo

Reputation: 3717

SPGs answer is the best, however, if you don't want to mess around with GWT resource bundles, you can put your font in your war directory, then in your index.html define the font:

<style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url(myfont.ttf);
    }
</style>

Then you set the font family to MyFont (or whatever you called it). Eg:

myLabel.getElement().getStyle().setProperty("fontFamily", "MyFont");

Upvotes: 1

spg
spg

Reputation: 9827

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";
}

Upvotes: 6

Related Questions