Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

@font-face formats support comparison

by Developer on ‎07-30-2012 04:03 PM (4,135 Views)



Creation of web pages and web-based user interfaces requires well-designed typography. When device-provided fonts do not fit design, custom font faces must be introduced. This article will compare custom font face formats support across various devices, with resulting file size change comparison.


CSS rules sample


Font faces are specified in the stylesheet for web page, each font face has its own @font-face section. To support various browsers and operating systems, many formats are specified, to meet device and browser specific requirements.


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


The browser selects the first format that is supported, processing source rules in top-down order.


Format comparison


EOT - Microsoft® propriety font format, supported by Windows® Internet Explorer® from early version,

WOFF - Open web font format, recommended for future use - during process of standardization. Limited support across browsers,

TTF - the oldest, and most well-known font file format. Supported by wide selection of browsers and systems,

SVG - Scalable Vector Graphics format, font is saved as list of vectorized glyphs which are used during print or text display,


Sample result font sizes


In table font comparision there is a percentage change in resulting file size when converting from TTF format.


Gothic text 30772 0,77% 28,23% -41,21%
Highly detailed dingbats 93412 0,20% 63,02% -58,45%
Simple text 40476 0,64% 40,53% -68,71%
Highly detailed text 53416 0,37% 59,25% -72,64%


As it is showed, in most cases, the WOFF format is the smallest one and SVG is the largest one. EOT and TTF are almost the same and there is not much difference between them.


Device support


BlackBerry® Device Software version 5 No No No No
BlackBerry® 6 No No No Yes
BlackBerry® 7 No No Yes


BlackBerry® PlayBook™ OS No Yes Yes Yes
BlackBerry® 10 OS (BlackBerry® Dev Alpha Device) No Yes Yes Yes


Note: BlackBerry 6 has observed differences between various versions. Some of the devices may be not supporting custom font faces.




When size of font files does not matter (web page, mobile web page), the best will be use all possible format types knowing that at least one of them is supported by targeted device. When font should be packed along with application then wise selection of format should be made: WOFF format should be considered as best option for next generation of devices: smaller in size, open and well documented. When pre10 devices must be supported SVG is the best choice, it has largest support area.

Users Online
Currently online: 24 members 2,531 guests
Please welcome our newest community members: