qooxdoo's web fonts implementation is based on the @font-face CSS syntax. It attempts to abstract away cross-browser issues as far as possible, but due to the browser differences in web font support, it's up to the application developer to provide fonts in the appropriate formats. Tools like FontForge or services like FontSquirrel's font-face generator can be used to convert fonts.
Like any font that should be used in a qooxdoo application, web fonts are defined in the Font theme. They simply use an additional sources key:
/* ************************************************************************
#asset(custom/fonts/*)
************************************************************************ */
qx.Theme.define("custom.theme.Font",
{
fonts :
{
"fancy" :
{
size : 11,
lineHeight : 1.4,
family : [ "Tahoma", "Liberation Sans", "Arial" ],
sources:
[
{
family : "YanoneKaffeesatzRegular",
source:
[
"custom/fonts/yanonekaffeesatz-regular-webfont.eot",
"custom/fonts/yanonekaffeesatz-regular-webfont.ttf",
"custom/fonts/yanonekaffeesatz-regular-webfont.woff",
"custom/fonts/yanonekaffeesatz-regular-webfont.svg#YanoneKaffeesatzRegular"
]
}
]
}
}
});
There are a few things to note here:
Once configured, web fonts are applied like any other font, either by referencing them in the Appearance theme, e.g.:
"window/title" :
{
style : function(states)
{
return {
cursor : "default",
font : "fancy",
marginRight : 20,
alignY: "middle"
};
}
}
or by calling a widget instance's setFont method:
var label = new qx.ui.basic.Label("A web font label");
label.setFont("fancy");
As web fonts are loaded over HTTP, there can be a noticeable delay between adding the CSS rule to the document and the font style being applied to DOM elements. This means text will be rendered in the first available fallback font, then once the web font has finished downloading, affected widgets will recalculate their content size and trigger a layout update, which can cause a visible "jump" in the GUI. While this effect is far less pronounced (if at all noticeable) once the fonts are cached, it is still advisable to use web fonts sparingly. Of course, using no more than two or three font-faces in an application is also good advice from a design point of view.