Welcome!

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 - edited on ‎07-30-2012 04:03 PM by BlackBerry Development Advisor (Retired) (3,850 Views)

Introduction

 

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.

 

Font TTF EOT SVG WOFF
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

 

Device/OS EOT WOFF TTF SVG
BlackBerry® Device Software version 5 No No No No
BlackBerry® 6 No No No Yes
BlackBerry® 7 No No Yes

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.

 

Conclusions

 

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.

Contributors
Users Online
Currently online: 4 members 1,109 guests
Please welcome our newest community members: