SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Squirrel Fonts

    Font Squirrel says . . .

    Fonts not loading in Firefox

    The primary reason for this failure? You are still using a version Firefox older than 3.5. (My Version is 6.0.2) So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    If you are serving from Apache, you can add this to you .htaccess file to allow your site access to the fonts:

    <FilesMatch "\.(ttf|otf|woff)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>
    Or even better, since the above code will allow anyone to leach:

    <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 ones above. Credit for this method goes to Brooke Elgie

    -----------------------------------------------------------------------------------------------------

    My site (domain) is GoDaddy.

    I don't know what "calling domains" are. I don't know where it's referring to when it says "the ones above?"

    I'm not sure where, or how to place this.

    Can anyone Help me with this?

    Thanks . . . Rick

  2. #2
    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)
    Using FontSquirrel fonts is pretty simple, so it shouldn't require all that messing around. It looks to me like you have the font files in the wrong place. According to your file paths, those font files should be located here:

    http://www.propertieswithstyle.com/c...r-webfont.woff

    But that link throws an error. So, the question is, what folder are these fonts stored in? (Make sure to tell us where this folder is in relation to the root folder—i.e. where the home page is.)

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Basically the information that FontSquirrel returned to you is accurate, most apache servers by default will block unknown or extensions it feels is a threat to the server. Basically all you need to do is change

    Code:
    (domain1\.org|domain\.com)
    to

    Code:
    (propertieswithstyle\.com)
    and once you have done that the @font-face kit should work fine.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mydesign root?
    _notes ? ? ?
    css
    images
    scripts
    fonts
    graphs

    IT SHOULD BE . . .

    mydesign root?
    css
    images
    scripts
    fonts
    graphs

    _notes has the following in the folder . . .cdmmap.html.mno ? ? ?

    <?xml version="1.0" encoding="utf-8" ?>
    <info>
    <infoitem key="MMGuideColor" value="#00FF00" />
    <infoitem key="MMGuideVisible" value="true" />
    <infoitem key="MMGuideLocked" value="false" />
    <infoitem key="MMSnapToGuide" value="true" />
    <infoitem key="MMGuidesSnapToElements" value="true" />
    <infoitem key="MMDistanceColor" value="#0000FF" />
    <infoitem key="MMGuideCount" value="2" />
    <infoitem key="MMGuide0" value="vertical: user 1200 px" />
    <infoitem key="MMGuide1" value="vertical: user 42 px" />
    </info>


    I do not now where the _notes folder comes from. I think it's placed there by Dreamweaver.

    The only thing I use Dreamweaver for is coding.

    Can I remove this folder? I think it might be causing the problem.

    Thanks . . . Rick

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where is this? (domain1\.org|domain\.com) I don't see it anywhere.

    Rick

  6. #6
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Where is this? (domain1\.org|domain\.com) I don't see it anywhere.
    It's in the second section of .htaccess code included in your first post:

    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>
    So, for your domain, the full code to add to the .htaccess file would be:

    Code:
    <FilesMatch "\.(eot|otf|woff|ttf)$">
    SetEnvIf Origin 
    "^http(s)?://(.+\.)?(propertieswithstyle\.com)$" origin_is=$0
    Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
    </FilesMatch>

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Victorinox . . . that was a copy & paste directly from font Squirrel on the Firefox error.

    I have never seen that file. Where is it!

    Is it in the Tangerine download folder from Font Squirrel?

    Thanks . . . Rick

  8. #8
    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)
    Did you actually upload the FontSquirrel fonts to your server? Are they in your /fonts/ folder? Is your /fonts/ folder directly inside your main root/home folder? It seems like the fonts are not there.

    The code you posted in your first post is meant to go in a special file called a .htaccess file. But before you crawl down that rabbit hole, I think you should check the more obvious things, as outlined in my questions in this post.

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

    I Downloaded the Tangerine font @font-face kit directly from Font Squirrel

    Unzipped them and placed them in my font folder which is directly under the css folder as shown above.

    I also upgraded Firefox to 9.0.2 - same problem, and my android HTC phone - the same problem also.

    I can't figure it out.

    I spent time on-line following Paul's blog and other post but it seems I have the "right stuff" if you will.

    The fonts work in IE 8 and Chrome.


    Thanks . . .

  10. #10
    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)
    When you say your fonts folder is "under" your CSS folder, do you mean it's in the same folder as the CSS folder, or inside the CSS folder? At the moment, your CSS links are telling the browser to find your font folder inside your CSS folder (but in a rather awkward way, as the links are saying "go up one folder, then come back into this folder, then find the fonts folder in here ...").

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you mean?

    My CSS FontSquirrel structure . . .

    Code:
    @font-face {	font-family: 'tangerine';
    			     src: url('/css/fonts/Tangerine_Regular-webfont.eot');
    			     src: local("☺"),
     	                     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;
    }
    What about the section in blue?

    Attached is my FileZilla Server Side Directory (.jpg)

    Fonts work in IE but not in Chrome or Firefox.

    I'm bedazzled!

    thanks . . . rick
    Attached Images Attached Images

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,059
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Using FontSquirrel fonts is pretty simple, so it shouldn't require all that messing around. It looks to me like you have the font files in the wrong place. According to your file paths, those font files should be located here:

    http://www.propertieswithstyle.com/c...r-webfont.woff

    But that link throws an error.
    I get a 404 error for that file, too, but the other font formats (svg, ttf and oet) are in that directory. Maybe need to redo the woff format and try again? I've never used @font-face, so I'm guessing.

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

    CSS W3c Returned scr doesn't exist . . .

    "Property src doesn't exist :url('//css/fonts/Tangerine_Regular-webfont.eot')"

    "Property src doesn't exist : local("???"),

    Then it goes on to list the four fonts types . . .

    Property src doesn't exist then list the .oet .woff .ttf .svg along with font-weight, font-style and font-variant doesn't exist.

    With my limited knowledge it appears that I'm not selecting my path to the fonts correctly.

    Based on the folders image in my previous post, just how do I point to the font folder?

    src: url('..css/fonts/Tangerine_Regular-webfont.eot');
    or
    src: url('../fonts/Tangerine_Regular-webfont.eot');
    or
    src: url('../css/fonts/Tangerine_Regular-webfont.eot');

    Oh . . . what does a parse error mean . . ?

    Thanks much . . . Rick

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

    Now Works in IE 8 but Not in Chrome

    It's almost like I'm back where I started.

    This works well in IE 8 but not in Chrome
    Code:
    @font-face {font-family: 'tangerine';  
    		  src: url('../css/fonts/Tangerine_Regular-webfont.eot');  /* IE9 Compat Modes */
    		  src: local("☺"),
     		  src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
    		      url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
     		      url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
    		      url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg'); /* Legacy iOS */
    		font-weight:normal;
    		font-style:normal;
    		font-variant:normal;
            }
    I searched the Internet for all @font-face postings and Chrome but haven't found an answer.

    Any guidance would be greatly appreciated.

    Thanks . . . and I'll continue to search for an answer . . .

    Rick

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,059
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Based on the folders image in my previous post, just how do I point to the font folder?
    As your font folder is inside your css folder:
    Code:
    src: url(fonts/Tangerine_Regular-webfont.eot);

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

    It Comes down To this . . . src: local("☺"),

    If I remove this . . . src: local("☺"), line of code from the CSS then the fonts render properly in Chrome but NOT in IE 8???

    If I insert it back into the css page it renders properly in IE 8 but NOT in Chrome???

    Here is the complete CSS . . .
    Code:
    @font-face {	font-family: 'tangerine';  
    			src: url('../css/fonts/Tangerine_Regular-webfont.eot');  /* IE9 Compat Modes */
    			src: local("☺"),
     			src:  url('../css/fonts/Tangerine_Regular-webfont.eot#iefix') format('embedded-opentype'),  /* IE6-IE8 */
    		              url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),  /* Modern Browsers */
     		              url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),  /* Safari, Android, iOS */
    		              url('../css/fonts/Tangerine_Regular-webfont.svg#svgTangerine_Regular') format('svg'); /* Legacy iOS */
    			font-weight:normal;
    			font-style:normal;
    			font-variant:normal;
    }



    I've been working on this for two days now.


    H E L P . . .

    Thanks . . . Rick

  17. #17
    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)
    You aren't really listening to what's been said above. The font is not there. Upload it again, fix your file paths, and don't ess with the code that Font Squirrel gave you.

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

    Uh . . . can't see it!

    Quote Originally Posted by ralph.m View Post
    When you say your fonts folder is "under" your CSS folder, do you mean it's in the same folder as the CSS folder, or inside the CSS folder? At the moment, your CSS links are telling the browser to find your font folder inside your CSS folder (but in a rather awkward way, as the links are saying "go up one folder, then come back into this folder, then find the fonts folder in here ...").
    Ralph - can you explain that graphically?

    Rick

  19. #19
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,059
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Ralph - can you explain that graphically?

    Rick
    See post #15. @ralph.m was asking whether or not your fonts folder is inside your css folder, and according to the screenshot you posted, it is. The path to the folder that you are using is more complex than it needs to be.

  20. #20
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    See post #15. @ralph.m was asking whether or not your fonts folder is inside your css folder, and according to the screenshot you posted, it is. The path to the folder that you are using is more complex than it needs to be.
    I don't know what inside or outside is. Do you mean above or below?

  21. #21
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean where is the .htaccess file located?

    Is this also known as domain?

    Is it on my computer or on the server at GoDaddy?

    I've never heard of this before.

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,059
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    I don't know what inside or outside is. Do you mean above or below?
    I mean inside, because you have to open your css folder to find the fonts folder inside it, just as if they were paper folders in a filing cabinet. In the screen-shot you posted, you have a folder called css, then a line coming out of that folder, leading to more folders called fonts, graphs, images and scripts. These four folders are all contained inside the css folder.

    Quote Originally Posted by R Schreiber View Post
    I mean where is the .htaccess file located?
    You don't have one, because your server is not running Apache, it's running MS-IIS.

    Quote Originally Posted by R Schreiber View Post
    Is this also known as domain?
    No. The domain is the name of your site - propertieswithstyle.com.

    Quote Originally Posted by R Schreiber View Post
    Is it on my computer or on the server at GoDaddy?
    If you had a .htaccess file, it would be located on the server.

    My advice? Forget about .htaccess files, because they're irrelevant here. Go back to Font Squirrel and re-do your font, or at least the WOFF version, which appears to be missing. Copy and paste the CSS exactly as Font Squirrel gives it to you. Make sure you upload all the font formats to your fonts folder. Then test the site, and if you're still having problems after doing all of that, then post back and we'll have another look at it.

  23. #23
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's got to be in the way I point to various folders . . .

    mydesign (root?) all my .html files
    css
    images
    scripts
    fonts
    graphs (this will eventually have approximately 90 .gif charts)

    How do I point to each folder when I need it?

    This is my index.html file - am I pointing to the image correctly?
    var image1=new Image()
    image1.src="..css/images/hpcdmview.png"

    This is in my CSS page
    src: url('/fonts/Tangerine_Regular-webfont.eot'); /* IE9 Compat Modes */

    Am I pointing to this correctly?

  24. #24
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,059
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    How do I point to each folder when I need it?

    This is my index.html file - am I pointing to the image correctly?
    var image1=new Image()
    image1.src="..css/images/hpcdmview.png"
    That should just be
    Code:
    image1.src="css/images/hpcdmview.png"
    without the dots at the start.

    Quote Originally Posted by R Schreiber View Post
    This is in my CSS page
    src: url('/fonts/Tangerine_Regular-webfont.eot'); /* IE9 Compat Modes */

    Am I pointing to this correctly?
    I've already answered that question. (See post #15.) You'll find people are much more willing to help if you read the answers you receive carefully and try to implement the advice given before posting back with more questions.

  25. #25
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    src: url('/fonts/Tangerine_Regular-webfont.eot'); /* IE9 Compat Modes */

    This failed . . .


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
  •