Day: September 29, 2012

How To Use Custom Fonts On Your XPage With CSS

With CSS (Cascading Style Sheets) you can use custom fonts on your Xpage. Normally you only see the fonts that are already installed on your computer. So if you use a font that is not installed on your XPage user’s computer then his or her browser will show some other font that exists on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.

Conventional way of using custom fonts for headings and logos etc. is creating the text in a graphic editor and then using the image file. From the perspective of SEO this is not appropriate; you must use text as much as possible.

Now there is a way around in CSS that lets you use custom fonts, downloadable fonts on your XPage. You can download the font of your preference, let’s say my_font.ttf, and import it as a file resource into your application.

Then from within your CSS file (or wherever you are defining your styles) you have to refer to that font in the following manner:

@font-face {
font-family: my_font;
src: url("accid___.ttf");
}

After that you can use it just like a normal CSS declaration. Here is en example for an xc:label control:

.xspTextLabel{
font-family: my_font; /* no .ttf */
font-size: 2em;
}

This method works in all modern browsers, except IE ( no surprise is that ).
This is because Internet Explorer does not recognize TTF / OTF, it uses a proprietary format called EOT. To make your @font-face declaration works with IE as well, you must prepare two font files, one in TTF / OTF format and the other one in EOT format. To learn more about EOT, and how to convert TTF / OTF to EOT, please refer to this article.

I have decided not to give a shit about IE when blogging.