1. #1
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Question @font-face iPad issue

    @font-face iPad issue


    Hi guys,
    I start form a couple of weeks to develope my iPad application using this great framework, and I can say that is works really great! In fact, this post is not really on Sencha help request, but on iPad Safari Mobile, and I'm sure someone can help me to figure out where the problem is.
    I explain my problem:
    How the title report, I'm having a CSS3 issue on @font-face testing the application on my iPad, in fact, the problem is only on Safari Mobile, and not on Safari. Safari display the custom font correctly! I already know Safari use custom .svg fonts, so my CSS seems to be configured correctly.

    To use this custom font, i downloaded the font-face kit from http://www.fontsquirrel.com, that comes out with a pre configured CSS, a demo page, and all the fonts that I need.
    At this point I uploaded the kit on my domain, and tried to open the demo page with all the browsers: "It works!", except, like i say on iPad.
    Here is the font face property that comes out with the kit:

    PHP Code:
    @font-face {
        
    font-family'ZendaRegular';
        
    srcurl('zenda-webfont.eot');
        
    srclocal('?'), url('zenda-webfont.woff'format('woff'), url('zenda-webfont.ttf'format('truetype'), url('zenda-webfont.svg#webfont'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;

    As i already said, the custom fonts doesn't display ONLY on iPad, but if I edit this propery in the following way

    PHP Code:
    @font-face {
        
    font-family'ZendaRegular';
        
    srcurl('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.eot');
        
    srclocal('?'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.woff'format('woff'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.ttf'format('truetype'), url('http://www.fontsquirrel.com/utils/load_font.php?font=689/webfonts/zenda-webfont.svg#webfont'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;

    It display on iPad Safari mobile too!

    So, does someone can tell me what I'm missing? What's wrong with the first @font-face configuration?

    My supposition is that on my domain, that font is not really installed like system font, and it is on fontsquirrel.com.
    Can this really be the problem?

    Thanks
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Does someone can help me to solve this problem?
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User xantus's Avatar
    Join Date
    Aug 2007
    Location
    Seattle, WA
    Posts
    135
    Vote Rating
    0
    xantus is on a distinguished road

      0  

    Default


    Where are your zenda-webfont.* files located? They should be in the same directory as your css, or use a relative path to point to them.
    Software Engineer
    http://xant.us/

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    As you say, the webfonts are located in same directory of my css, in fact, as I show in my example, i have no problem with every browser except for Safari Mobile on my iPad. If the fonts was in the wrong directory I cannot see the custom fonts even on IE, Firefox and Safari.
    This is a very strage issue which I can't really figure out.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    toe is on a distinguished road

      0  

    Default


    Andrea,
    I hope you have already found an answer but if not here is a solution. I had the same issue and the way I fixed it was to go to http://www.fontsquirrel.com/fontface/generator and generate an SVG version of your font. I went ahead and created them all just I have them, but when you do that it will give you the src css so you will know how to put it in your CSS file.

  6. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Just to everybody know I solved the problem adding a .svg MIME Type to my IIS server configuration with "image/svg+xml" content.
    IIS does not serve "unknow" files so you have to add this extension to let iPad and iPhone display the font properly.
    Hope this helps,

    Cheers
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


Similar Threads

  1. Ext HtmlEditor face Extend
    By sloppy in forum Community Discussion
    Replies: 11
    Last Post: 6 Dec 2008, 12:37 PM
  2. How to extend ext htmleditor face function
    By SeekerGu in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Aug 2008, 1:24 AM
  3. ComboBox IE7 display issue (caused by font)
    By scolemann in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 26 May 2008, 11:55 PM
  4. ext.BasicDialog? font-size and font-family for title
    By anjumzulfiqar@yahoo.ca in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 26 Oct 2007, 12:58 PM

Thread Participants: 2

Tags for this Thread