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
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
Retired
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.
Developer
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
Retired
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.
Highlighted
Contributor
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

Developer
Posts: 123
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

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

Hi All,

 

I am developing a simple webworks app for BB10.Earlier, i was using normal font.So app was working fine.

Now client has asked to use custom font provided by him.I tried replacing the font in css file as below:

@font-face {
  font-family: 'TheABC';
  src: url("../fonts/webfont.ttf");
  
 font-weight: normal;
  font-style: normal;
}

And using it as below:

body {
  font-family: TheSans;
  font-size: 1rem;
}

 

 

When i try to run the app, it takes some adjusting effect to render UI on screen.Though it is working fine with other fonts(Normal).

Also referred below defect defect version:

 

https://www.blackberry.com/jira/browse/BBTEN-112

https://www.blackberry.com/jira/browse/BBTEN-74

 

Please help!!!

 

Developer
Posts: 123
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

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

[ Edited ]

Hi All, Please help me to overcome above issue.As i had to deliver it to client and same thing is working fine IOS. If it's a know issue for BB or there is anything that i am doing wrong.Some body from blackberry development help me overcome through this.

And using above code as:

body {
  font-family: TheABC;
  font-size: 1rem;
}

 

BlackBerry Development Advisor
Posts: 841
Registered: ‎07-15-2008
My Device: Passport
My Carrier: Bell

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

Can you provide a screenshot of what you are seeing?

Tim Windsor
Open Source Technical Lead
Developer
Posts: 123
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

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

Thanks for your response.I am trying to make out one sample page in which i can provide you with screen shots so that it can hel me.

Meantime, From Adjusting time means, it takes some flickering time of effect on very first page while launchin application.After that it works fine.

Thoug i will provide with screen shots soon.

Developer
Posts: 123
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

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

[ Edited ]

It works for me.Previously i was loading custom font in mid of CSS file.NOw in that starting itself i am loading it.

@font-face {
    font-family: '"TheABC"';
    src: url('../fonts/TheABC-lp6sebld-webfont-webfont.eot');
    src: url('../fonts/TheABC-lp6sebld-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TheABC-lp6sebld-webfont-webfont.woff2') format('woff2'),
         url('../fonts/TheABC-lp6sebld-webfont-webfont.woff') format('woff'),
         url('../fonts/TheABC-lp6sebld-webfont-webfont.ttf') format('truetype'),
         url('../fonts/TheABC-lp6sebld-webfont-webfont.svg#TheABClp6_semibold') format('svg');
    font-weight: normal !important;
    font-style: normal !important;
	text-shadow:none !important;
}

 And als using font-face as below:

body {
  font-family: "TheABC";
  font-size: 1rem;
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

 Previously using like this:

body {
  font-family: TheABC;
  font-size: 1rem;
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}