SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  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,107
    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
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    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.

  4. #4
    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.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 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.

  6. #6
    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

  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
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 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)

    Tangerine_Regular woff

    I must be missing something right in front of my face.

    The woff font is in my font folder.

    The attached are the contents of my font folder.

    It appears that the woff font is there.

    Thanks Rick
    Attached Images Attached Images

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Is that what's on your local machine or on your server? Maybe try uploading the fonts again, as that font is definitely not where it's mean to be. This is the direct link to that woff file, and it returns a 404 error:

    http://www.propertieswithstyle.com/c...r-webfont.woff
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is that what's on your local machine or on your server? Maybe try uploading the fonts again, as that font is definitely not where it's mean to be. This is the direct link to that woff file, and it returns a 404 error:

    http://www.propertieswithstyle.com/c...r-webfont.woff
    That's interesting.

    I have re downloaded the fonts twice before to be sure.

    I've also uploaded them to my font folder on the server. I was very careful to be sure they were on the server.

    When I'm at the office tomorrow I'll double check.

    Thanks Ralph

  13. #13
    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

  14. #14
    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



  15. #15
    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

  16. #16
    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



  17. #17
    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

  18. #18
    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



  19. #19
    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 . . . .

  20. #20
    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



  21. #21
    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

  22. #22
    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



  23. #23
    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

  24. #24
    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



  25. #25
    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


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
  •