How To Use Custom Fonts On Your XPage With CSS – now with IE

Although I wrote in a previous article, that I would not give a shit about IE in my personal life any longer, I could not resist to find out how custom fonts can be used in the browser wannabe and how to convert an existing ttf font to something that the M$ crap could possibly handle.

M$ IE cannot handle a TTF file; it needs an EOT file instead. If your font does not come with different files for IE and modern browsers, you have to convert it. The easiest way I found to convert an existing TTF file is using a service on the web. I tried a few but http://www.fontsquirrel.com had the best results.

Not only the font is converted into an EOT file ( plus SVG and WOFF ) , also the CSS is generated for you.

Just upload your TTF file and get the converted files in return.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 30, 2012 */

@font-face {
font-family: "myFont";
src: url("accid___-webfont.eot");
src: url("accid___-webfont.eot?#iefix") format("embedded-opentype"),
url("accid___-webfont.woff") format("woff"),
url("accid___-webfont.ttf") format("truetype"),
url("accid___-webfont.svg#myFont") format("svg");
font-weight: normal;
font-style: normal;
}

.xspTextLabel{
font-family: myFont;
font-size: 3em;
}

I have tested with IE9 and it works. Not sure, if it will work in IE8 and less. It’s up to you to test and leave a reply …