Re: Webfonts with ClientBundle, UiBinder

You need to define the font using @font-face.

By default fontawesome.css contains

@font-face {

  font-family: 'FontAwesome';

  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');

  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');

  font-weight: normal;

  font-style: normal;

}

at the very top of its CSS file which tells the browser about the font "FontAwesome". You need to adjust this block to make it work. 

Since you only want woff you can remove everything else:

@font-face {

  font-family: 'FontAwesome';

  src: url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');

  font-weight: normal;

  font-style: normal;

}

Next you have to decide if you want to embed the font into your GWT app as DataResource or if the browser should load the file normally like defined above. If you want to use DataResource you need to replace the url() part with the @url constant of GWT. If you want to leave it as is, I would create a public folder, place all fonts in "public/fonts" and then remove "../" from the url(). That way the font files will be copied to your war/app/fonts folder whenever you GWT compile your app and should be accessible by the browser. You might want to rename font files to contain ".cache." if you place them into the public folder so your web server sets correct caching headers.

Once you have done that you should be able to use <ui:with> to import your ClientBundle into UiBinder and use the icons (don't forget to call ensureInjected()).

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.