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

Reply
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Custom font (@font-face) rendering issue

Hey there,

 

could somebody please confirm my current issue regarding the use of custom fonts on BB10 (Simulator & Dev Alpha)? I used two Frutiger licensed webfonts (TTF format) and included them in CSS with @font-face as following:

 

@charset "utf-8";

@font-face {
   font-family: frutiger45;
   src: url('../assets/fonts/frutiger45.ttf') format('truetype');
}

[...]

 

The font is displayed, but there is a obvious kerning (whitespice between characters) issue. See my screenshot below.

Kerning works fine on "the other platforms" ©.

 

IMG_00000052.png

 

Oh, I just noticed the same behaviour on the PlayBook. So, this is an old problem? Any workaround? I couldn't find any topics on this in the forums...

- - -
My approved apps @ App World
Please use plain text.
BlackBerry Development Advisor (Retired)
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Custom font (@font-face) rendering issue

This looks like something I'd want the browser dev team to take a look at more closely.

 

Can you please submit this as an issue tracker bug here, and I can escalate internally?   Please link to this forums thread in the issue tracker item as well.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Custom font (@font-face) rendering issue

Thanks. I'm not sure if I chose the right category and version, since this is more a general browser issue and less linked to a specific OS. However I suppose the focus is currently on BB10...

 

Here's my report: https://www.blackberry.com/jira/browse/BBTEN-112

- - -
My approved apps @ App World
Please use plain text.
BlackBerry Development Advisor (Retired)
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Custom font (@font-face) rendering issue

Does this font scaling issue still occur in the latest BlackBerry 10 OS - version 10.0.9.388 ?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Contributor
pmulkins
Posts: 11
Registered: ‎10-27-2012
My Device: LE Z10
My Carrier: Telus

Re: Custom font (@font-face) rendering issue

[ Edited ]

I am having the same problem.  I tried using many different fonts from Font Squirrel.  I am using Dev Alpha A, 10.0.9.388. Please note the "fonts" folder is located in the root folder, and my css and js files are located in the same directory without issue. 

 

Here is the code I was using:

 

``@font-face {

font-family: 'VAG';
src: url('fonts/VAG-HandWritten-webfont.eot');
src: url('fonts/VAG-HandWritten-webfont.woff') format('woff'),
url('fonts/VAG-HandWritten-webfont.ttf') format('truetype'),
url('fonts/VAG-HandWritten-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

h1 {
font-family: 'VAG', Arial, sans-serif
}``

 

I have tried using web inspector, but nothing seems to pop up. Any help would be greatly apprecaited. 

 

Regards,

 

Phil

Please use plain text.