Blackberry @font-face CSS declaration

Had to try and get some custom fonts working on a Blackberry specific website today and couldn’t find much official guidance or help via Google searches so thought this might help someone. The Blackberry browser on BB OS5, 6 and 7 only supports SVG font files (you can use fontsquirrel to convert from other formats). Unfortunately SVGZ (gzipped SVG) doesn’t seem to work from my testing.

@font-face {
	font-family: 'TimesModernCondensed';
	src: url('../fonts/timesmodconlightdc-webfont.svg#TimesModernCondensedDCCnLtDC') format('svg');
	font-weight: normal;
	font-style: normal;
}

N.B: Don’t be tempted to change the text after the ‘#’ as this has to reference the embedded font name within the file. Font Squirrel gets this automatically, leave it as it is or you’ll cause yourself unnecessary pain like I went through…

Mar 15th, 2012

Filed under: Web Development

Tags: , ,

Interact & Share

Post a comment or leave a Trackback

Blackberry @font-face CSS declaration

  • Edjunk30

    Do you know what the situation is with BB OS4?

  • http://www.ajgraham.com/blog Alex Graham

    according to http://pdadb.net/index.php?m=os&id=b400&c=rim_blackberry_os_4.0  BB OS4 is 9 years old so I don’t think @font-face would work unfortunately

  • Edjunk30

    I’m doing a bit more investigation trying to work out when support for font-face came in, the OS5 simulator I have isn’t accepting my font-face declaration, but this document states for svg (not fonts specifically though) from OS 4.7. Do you have a working site that uses an svg font I could look at? I can then point a few simulators at it and work out the version which starts to support svg fonts and I’ll come back and post my results. I think the svg font I’m using might be using some newer specification.

    I think OS4 varied quite a lot between early and later sub versions and the major version was around quite along time before they jumped to OS5.

  • Edjunk30

    Link: http://docs.blackberry.com/en/developers/deliverables/11844/Native_SVG_support_887737_11.jsp

  • http://www.ajgraham.com/blog Alex Graham

    I don’t have a test page unfortunately as the website is behind a paywall (it was for the Times newspaper) now and I don’t have access to the testing site anymore. I did some more searching and the earliest documented SVG font mention is 4.7 from what I’ve found: http://docs.blackberry.com/en/navigation/search.do?q=svg+font&x=0&y=0&searchMode=simple&pageServletPath=%2Fsmartphone_users%2F&pageQueryString=userType%3D1&domainID=528&firstTime=true which matches what you’ve found. I’d agree about OS4 having a very long shelf life compared to OS5 and 6 so it makes sense that SVG font usage was added some way through OS4 but I can’t find anything to say which version. Sorry I couldn’t help more, let me know how you get on.

    Out of curiosity are you having to support BB OS 4.x? It’s just that I can’t imagine many BB OS4 devices being in use still today

  • Edjunk30

    Ok, so I’ve used http://www.fontsquirrel.com/ as a secondary test, the first being my dev site, and on BB OS 5 (yep 5) does NOT support the SVG font they use in the middle for “ONLY THE BEST COMMERCIAL-USE FREE FONTS”. My font works on a OS6 simulator (only site I’ve tested) so it may be that only OS6 supports SVG fonts (or indeed any other font-face declars) or that just a subset/older specification.

    No, I’m not having to support OS4 per se, I was just looking at how to get fonts working for BB OS in general and thought I’d just see how far back I could go. It’s for my web/apps business site and I’ve just spent the last two days making it more BB friendly. One of my selling points (I couldn’t think of a less vomit inducing phrase, sorry) is making sites that still work on older browsers. 

blog comments powered by Disqus