Re: Webfonts with ClientBundle, UiBinder

Thanks for the info. I've made some changes, but still I'm only as close as when I added the Font Awesome CSS with a ui:style element: I'm not seeing the camera icon, only an empty rectangle with a heavy black border (running in Chrome with SDM).

I've edited the CSS--now named fontAwesomeWoff.css--to look like

@font-face{

  font-family:'FontAwesome';

  @url fawoff woff?v=4.2.0;

  font-weight:normal;font-style:normal}

 .fa{display:inline-block;font:normal ... 

 

My ClientBundle is

 

 public interface FontAwesomeBundle extends ClientBundle {

  

  FontAwesomeBundle INSTANCE = GWT.create(FontAwesomeBundle.class);

  

  @NotStrict

  @Source("./fonts/fontAwesomeWoff.css")

  FontAwesome fa();

  

  @DoNotEmbed

  @MimeType("application/font-woff")

  @Source("./fonts/fontawesome-webfont.woff")

  DataResource woff();

  

  public interface FontAwesome extends CssResource {

    String fa();

    

    @ClassName("fa-lg")

    String large();

    ...

    

In my EntryPoint class, after setting the logging and window closing handlers and injecting the global stylesheet (as in Showcase), I call 

  FontAwesomeBundle.INSTANCE.fa().ensureInjected();

To try this out, in my UiBinder file I put

  <ui:with field='font' type='com.myapp.mobile.client.FontAwesomeBundle' />

  ...

  <i class="{font.fa.fa} {font.fa.cameraRetro} {font.fa.scale3x}"></i>

but instead of the camera, I see an empty rectangle with a heavy black border

  

I've attached a partial screen shot from Developer Tools showing the element (<i class="EBB DEB...) and style. The font is in the style--see EEB--but I don't see the camera icon on my page.

Have I missed some sort of injection? Should there be something more in my *Impl.ui.xml file? Should I be adding something to the *Impl.java file that pairs with the *Impl.ui.xml file? What am I missing that is keeping the image icons from drawing?

On Wednesday, September 24, 2014 4:16:09 AM UTC-4, Thomas Broyer wrote:

On Tuesday, September 23, 2014 11:36:59 PM UTC+2, Jens wrote:

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.

I'd just use a DataResource in any case, and annotate it with @DoNotEmbed if I don't want the font embedded as a "data:" URL.

GWT will take care of the copying, renaming, etc.

Actually, if the font file is "big enough" (the data: URL would be longer than "(2 << 15) - 1" chars), it won't be embedded anyway, whether you use @DoNotEmbed or not.

--
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.