SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 And Chrome vs. Firefox Font Squirrel

    Things finally looking better in IE8 and Chrome.

    However, Font Squirrel Fonts not working at all in Firefox.

    Any ideas ? ? ?

    www.propertieswithstyle.com (not all pages complete yet)

    Also, can someone check on how my two columns merge together or apart upon resizing in or out?

    If I can get that corrected I'm almost home, correct?

    Thanks . . . Rick

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Firefox uses the WOFF format which you don't have on your site.
    http://www.propertieswithstyle.com/f...r-webfont.woff

    You might also have a mistake in your @font-face declaration, this should work, as long as the fonts are there
    Code css:
    @font-face {
    	font-family: 'tangerine';  
    	src: url('fonts/Tangerine_Regular-webfont.eot');
    	src:
    		url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
    		url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    		url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg');
    }

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Firefox uses the WOFF format which you don't have on your site.
    http://www.propertieswithstyle.com/f...r-webfont.woff

    You might also have a mistake in your @font-face declaration, this should work, as long as the fonts are there
    Code css:
    @font-face {
    	font-family: 'tangerine';  
    	src: url('fonts/Tangerine_Regular-webfont.eot');
    	src:
    		url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
    		url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    		url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg');
    }
    Thanks Mark . . . I do have this in my html . . .
    Code:
     url('fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
    Firefox has a problem with Font Squirrel fonts I believe.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Thanks Mark . . . I do have this in my html . . .
    Code:
     url('fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
    Firefox has a problem with Font Squirrel fonts I believe.
    Having that line in your HTML will not help if you don't have the woff format font available. As ralph.m and others explained in your other thread, that format is missing from your site. If you don't have a copy of it to upload, you'll need to go back to Font Squirrel and redo it.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Squirrel and Firefox

    Font Squirrel says . . .

    "IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case."

    Does "same domain as the website" mean that the Font Squirrel fonts have to be on FF server? My FS fonts are on my GoDaddy server.

    Their remedy is :
    Code:
    <FilesMatch "\.(eot|otf|woff|ttf)$">
      SetEnvIf Origin 
        "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
      Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
    </FilesMatch>
    Just swap out your calling domains for the one above
    I wouldn't know what, or where the "calling domains" are either.

    It mentions the htaccess file. I have no clue about this.

    see here: http://www.fontsquirrel.com/blog/201...-face-problems

    I've visited the code snippet on SitePoint before but did not obtain a clear answer.

    The FS fonts work well in IE8 and Chrome 10.0.648.204.

    Thanks . . . Rick

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Font Squirrel says . . .

    "IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case."

    Does "same domain as the website" mean that the Font Squirrel fonts have to be on FF server? My FS fonts are on my GoDaddy server.
    No. The domain is your website - propertieswithstyle.com - and the message means that the fonts have to be hosted somewhere within that site. All the other versions of the font - ttf, eot and svg - are on there, inside your "fonts" folder, but the woff version is missing.

    Quote Originally Posted by R Schreiber View Post
    Their remedy is :
    Code:
    <FilesMatch "\.(eot|otf|woff|ttf)$">
      SetEnvIf Origin 
        "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
      Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
    </FilesMatch>
    Just swap out your calling domains for the one above
    I wouldn't know what, or where the "calling domains" are either.

    It mentions the htaccess file. I have no clue about this.
    You can ignore all of this. The only remedy you need is the one we keep telling you - get a copy of the font in woff format and upload it to the folder with the others. Firefox needs this font format, so the only way it's going to work in Firefox is if you provide it.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry - I meant my css page.

    Rick

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Also, can someone check on how my two columns merge together or apart upon resizing in or out?
    It needs a lot of work. Most of the content is not accessible at all to me..

    Step 1. Remove fixed positioning for your menu - it's far too large.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Does "same domain as the website" mean
    It means the fonts must be on the same server as the html page that is calling them. Just store all the fonts on your server where the html page originates and you won't have to jump through any htaccess hoops.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Server Side Fonts

    I have these fonts on the server and on my hard drive.

    Please see the attached .png.

    Where next? I have no clue . . .

    Thanks

    Rick
    Attached Images Attached Images

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The screenshot indicates that you last uploaded the font three weeks ago, so perhaps try and upload it again because, for whatever reason the file does not seem to be recognized.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    The screenshot indicates that you last uploaded the font three weeks ago, so perhaps try and upload it again because, for whatever reason the file does not seem to be recognized.
    OK - I'll do that this afternoon and get back to you.

    Thanks . . . Rick

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Also, I'd not just overwrite the old file but delete the old file first and then upload the new file.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Squirrel and Firefox

    Ok . . . I deleted ALL Font Squirrel fonts from my computer and the server.

    Using the @font-face kit I downloaded the fonts again.

    Extracted them into my fonts folder.

    Via FilZilla, I uploaded them again to my font folder on the server.

    I uploaded the four Tangerine_Regular-webfont font files.

    Waited some time then tested in FireFox. Fonts do not render. Yikes!

    Where do I go from here?

    Thanks . . . Rick

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    And this is 100% the same root where all other files are located? Can you create and upload a test.txt file to the same /css/fonts folder(so that you have a file in /css/fonts/test.txt) to test if new files are uploaded correctly? If they are, we should be able to call the test.txt page and it should not show a 404 error.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How kewl! I never thought of that. It worked.

    Here http://www.propertieswithstyle.com/c...s/testtext.txt

    The result was correct as follows . . .

    This is a TEST TEXT file placed in my font folder on the server.

    Next . . . .

  17. #17
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Great! But that also tells us that if the .woff file is in that directory, then something else is completely wrong.

    I'm going to download the tangerine files from fontsquirrel and try them on my own server and see if I run into the same issues as you are.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  18. #18
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For clarification . . . my css

    Code:
    @font-face {	font-family: 'tangerine';  
    			src: url('fonts/Tangerine_Regular-webfont.eot');  /* IE9 Compat Modes */
    			src: local("☺"),;
     			src: url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
    		        url('fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
     		        url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
    		        url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg'); /* Legacy iOS */
    			font-weight: normal;
        			font-style: normal;
    			font-variant:normal;
    }
    Thanks I really appreciate your time.

    rick

  19. #19
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It works on my test server: http://lab.rockatee.com/tangerine.html

    Hmm... the path is right, the font file doesn't seem corrupt, and I haven't a clue why FF doesn't find your file.

    Edit: I just reloaded your page and, for a split second, the Tangerine font displayed. Hmm...
    Attached Images Attached Images
    Last edited by kohoutek; Jan 31, 2012 at 15:43.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  20. #20
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll check my FF program again . . . . .

    Not rendering here . . . wait . . . need to check this FF version as it's different than the home computer . . . PROBLEM - this is FF 3.5. Let me upgrade and try it again . . .

    Sheesh . . .

    Rick

  21. #21
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Rick, remove the @font-face rule you have in your stylesheet and replace it with this:

    Code CSS:
    @font-face {
        font-family: 'tangerine';
        src: url('css/fonts/Tangerine_Regular-webfont.eot');
        src: url('css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
             url('css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
             url('css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }

    I just tested this on your site and it worked.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  22. #22
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh Oh . . gotta go.

    I'll upload the updated style sheet and test it.

    I'll let you know.

    thanks much . . . rick

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Is it this comma before the trailing semi-colon that is upsetting firefox?
    Code:
    	src: local("☺"),;
    The comma shouldn't be there as there are no more urls on that line and the next line starts with a src.

  24. #24
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,231
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by kohoutek View Post
    It works on my test server: http:/lab.rockatee.com/tangerine.html
    @kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?

  25. #25
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    @kohoutek - sorry to go off at a tangent here, but when I visit that link in FF, I have to enable JavaScript before the Tangerine font kicks in. I thought @font-face is pure CSS? Why does it require JS?
    I forgot a trailing slash in the URL. It should be: http://lab.rockatee.com/tangerine.html

    There's no Javascript involved.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •