OpenLaszlo & Open Web – CSS Downloadable Fonts Supported

by Raju Bitter on October 11, 2009

Max Carlson has added support for CSS @font-face inclusion of True Type (TTF), Open Type Fonts (OTF) and embedded fonts in Internet Explorer (EOT) to OpenLaszlo trunk. As a result, now it’s possible to display custom fonts in Firefox (3.5+), Safari/Webkit, Opera 10 and IE 6,7 and 8. Technically Chrome supports downloadable fonts as well, but for security reasons is has been disabled as default (you can test by adding the parameter –enable-remote-fonts to Chrome at start-up).

This example applications shows a custom font embedded into a DHTML/JavaScript OpenLaszlo application in various browsers. In Flash fonts could be embedded for a long time already, but such a widespread support of that feature based on open standards is definitely exciting.

The following collection of screenshots shows how the application is being rendered in different browsers – notice the significant differences in font size in IE8.

Downloadble/embedded fonts supported in OpenLaszlo for these browsers

Downloadble/embedded fonts supported in OpenLaszlo for these browsers

With support for text-shadow, box-shadow, downloadable fonts, ongoing work on support for rounded-corners and other HTML5/CSS2+3 features, OpenLaszlo currently is one of the most advanced RIA platforms supporting the Open Web movement.

Using downloadable/embedded fonts is as easy as this, just make sure you have an EOT version of the font available for IE.


  <!-- A font by Jos Buivenga (exljbris) -> http://www.exljbris.nl -->
  <font name="yanone" style="bold" src="YanoneTagesschrift.ttf" />

  <text x="50" y="35" font="yanone" fontstyle="bold" fontsize="28" text="OpenLaszlo for the Open Web!" />
  <text x="50" y="65" font="yanone" fontstyle="bold" fontsize="28" text="Downloadable Font Demo." />

With some adjustments to the font size and rendering – quality of the font in IE depends very much on the quality of the tool used for transforming from TTF to EOT format – the results will be very acceptable, although not pixel perfect as in Flash. Another big step would be to support HTML 5 video in OpenLaszlo.

Share:
  • Print this article!
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • StumbleUpon
  • E-mail this story to a friend!
  • Ping.fm
  • Twitter

{ 3 trackbacks }

OpenLaszlo & Open Web – Rounded Corners in SWF10 and DHTML
October 11, 2009 at 23:12
Webmaster Crap » Blog Archive » OpenLaszlo & Open Web – CSS Downloadable Fonts Supported
October 12, 2009 at 02:48
OpenLaszlo & Open Web – CSS Downloadable Fonts Supported - Posted In Graphics Design | bhienda - www.bhienda.com
October 12, 2009 at 04:50

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post: OpenLaszlo 5 Community Wishlist

Next post: OpenLaszlo & Open Web – Rounded Corners in SWF10 and DHTML