SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Css3 @fontface is not working with Chrome 17 and Firefox 10

    I'm trying this code For the @fontface :

    Code:
    @font-face {
        font-family: 'MothnnaFont';
        src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
        src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
            url('fonts/mothnna.ttf')  format('truetype'), /* Safari, Android, iOS */
            url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
        }
    I'm using the font in a class named demo :

    Code:
    .demo {
    		font-family:'MothnnaFont',Sans-Serif;
    		width:800px;
    		margin:10px auto;
    		text-align:center;
    		border:1px solid #666;
    		padding:10px;
                    direction: rtl;
    }
    This code is working on ie but it's not working on firefox 10 or chrome 17

    So anybody can help me to make this font appear a cross all browsers ?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    That look ok at a glance, have you got a live link?
    Have you got mothnna.woff and mothnna.ttf in the /fonts/ directory?

    Edit: have you tried without the 'direction: rtl' declaration?

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry there is no live link to it i'm testing this code locally before i apply it to the site

    I tried removing the
    direction: rtl
    it didn't change any thing

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry just a duplicated post by accident

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Where is the CSS file in relation to the fonts? (I'm checking your file paths here.)

  6. #6
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The fonts are in a folder called 'fonts' next to the css file

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by MBAsfoor View Post
    The fonts are in a folder called 'fonts' next to the css file
    When you say "next to", do you mean the CSS file and the /fonts/ folder are in the same folder together? E.g.

    Code:
    /folder/
        styles.css
        /fonts/
    If that's your structure, then that's OK, so it's not the issue.

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there is a link to a test page

    http://tmr.hyperphp.com/font/demo.html

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, so the next obvious question is: are the fonts definitely in that folder?

    Also, out of interest, what happens if you modify your code to something like this?

    Code:
    @font-face {
        font-family: 'MothnnaFont';
        src: url('fonts/mothnna.eot');
        src: local('☺'), url('fonts/mothnna.woff') format('woff'), url('fonts/mothnna.ttf') format('truetype'),  url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); 
        font-weight: normal;
        font-style: normal;
    }

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you can see a demo of it here http://tmr.hyperphp.com/font/demo.html

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by MBAsfoor View Post
    there is a link to a test page

    http://tmr.hyperphp.com/font/demo.html
    The font is actually working for me in Firefox and Chrome anyway.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Try putting the font files in the same directory as the css file and not in a sub folder to see if there is an issue there. I believe Firefox has a strict_origin_policy setting that may affect local resources like fonts.

    Otherwise put a demo online and then it will be easier for us to check.

    Edit:


    You replied while I was thinkking about it
    Seems it may be the issue I mentioned above with local files.

  13. #13
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still not working for me

  14. #14
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did't work

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    You mean the font in the online link isn't working for you? It seems to be working for me.

  16. #16
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes even the online link didn't work

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    This is what I see in Firefox and IE.
    Attached Images Attached Images

  18. #18
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no that's not the font type that i want it should look like this fontface.PNG

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    All I can suggest is that you run the font back through the font-squirrell generator and try again in case something went wrong before.

    I assume you do have a license to embed that font online if it's not a free font?

  20. #20
    SitePoint Member alexschmidt's Avatar
    Join Date
    Nov 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    perhaps the problem is that your CSS is too large or not W3C compliant...

    I have tried Rankvision.com's CSS Validator and it shows a lot of errors for the CSS code you've sent...

    Perhaps it's worth a try to run it through the tool...

  21. #21
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a free font downloaded form here: http://projects.arabeyes.org/project.php?proj=Khotot

    I just downloaded it again and reconvert it using http://www.font2web.com/ and it worked

  22. #22
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @alexschmidt thanks for your suggestion

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MBAsfoor View Post
    It's a free font downloaded form here: http://projects.arabeyes.org/project.php?proj=Khotot

    I just downloaded it again and reconvert it using http://www.font2web.com/ and it worked
    Good

  24. #24
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for helping


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •