Implementing WOFF ( Web Open Font Format) in mojo Skins

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
9/8/2010 1:06:34 PM
loyalphoenix
Gravatar
Total Posts 3
View Posts

Implementing WOFF ( Web Open Font Format) in mojo Skins

Hi ,

I'm trying to use WOFF in my skin , But i don't know why it doesn't effect .

I know how to use WOFF in regular website , And  I have read this article about disabling both server and browser cache and some other technics  , But it seems in mojo it doesn't load those .woff fonts .

Any advice ?

 

9/8/2010 1:19:00 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Implementing WOFF ( Web Open Font Format) in mojo Skins

Hello,

Can you post the WOFF related CSS you are using?

Most likely, you are using double quotes instead of single quotes. The CCSHandler in mojoPortal doesn't work well with double quotes so if you use them, anything after the first double quote will not be included in the CSS.

Thanks,
Joe D.

9/8/2010 1:52:38 PM
loyalphoenix
Gravatar
Total Posts 3
View Posts

Re: Implementing WOFF ( Web Open Font Format) in mojo Skins

Thanks Joe ,

 I use like this :

@font-face {
  font-family: BArsia;
  src: url(BArshia.eot);  /* for IE eot */
}
 
@font-face {
  font-family: BArsia;
  /* Works only in WOFF-enabled browsers like Firefox  */
  src: url(BArshia.woff) format("woff"),/*  woff */
       url(BArshia.ttf) format("truetype");/* ttf  */

}

like the way  i use in regular website . But i'm sure it's because of format section ( format("woff") ) Because it shows those custom font  correctly in IE .

I tried format('woff') ( single quotes )  too , But it doesn't work neither .

9/8/2010 3:25:32 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Implementing WOFF ( Web Open Font Format) in mojo Skins

Hello,

Use this instead:

@font-face {
  font-family: BArsia;
  src: url('BArshia.eot');  /* for IE eot */
}
 
@font-face {
  font-family: BArsia;
  /* Works only in WOFF-enabled browsers like Firefox  */
  src: url('BArshia.woff') format('woff'),/*  woff */
       url('BArshia.ttf') format('truetype');/* ttf  */
}

You need to replace all instances of the double quotes with single quotes and use single quotes in all url() rules.

I am using this method on http://i7media.net for the page title. I haven't bothered to make it work with IE yet but it is working in FF.

HTH,
Joe D.

9/8/2010 3:31:58 PM
loyalphoenix
Gravatar
Total Posts 3
View Posts

Re: Implementing WOFF ( Web Open Font Format) in mojo Skins

Thank you so much Joe ,

This code works fine for both IE and Firefox to me .

9/8/2010 3:53:59 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Implementing WOFF ( Web Open Font Format) in mojo Skins

Glad to hear it.

I just haven't downloaded the EOT version of the font I am using, that's the only reason IE isn't showing it yet.

I'll have to create a blog post about this one.

Later,
Joe D.

You must sign in to post in the forums. This thread is closed to new posts.