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










{ 3 trackbacks }
{ 0 comments… add one now }