SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font not loading

    Hey all, I'm trying to get a font to load on a site design (it's offline so I can't link to it but if it will help I can sort out hosting it).

    I'm trying to load this font: http://californiafonts.com/fonts/165..._earthworm-jim
    Code:
    @font-face {
       
       
       
         font-family: 'botchfont';
        src: url('fonts/Jim.eot');
        src: local('fonts/Jim'), 
             url('fonts/Jim.ttf') format('truetype'),
             url('fonts/Jim.svg#font') format('svg'); 
    }
    I followed a guide and converted it because the original ttf wasn't doing anything, but it's still not working. It appears to be 'attempting' to load it as when I applied it to the body as a test, the text didn't immediaetly appear and when it did it defaulted to Times New Roman instead. The other font (League Gothic) I am using works fine so I assume it is something to do with the font, but I don't know. Are there limitations on what fonts you can use? I just want it to work for my Headers.

    Thanks for reading.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What happens if you eliminate this bit?

    local('fonts/Jim'),
    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."

  3. #3
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same thing, the particular text (in this case an H1) takes longer to appear than the rest so it is doing something, but just won't take that font.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Is this just in a particular browser? Bulletproof @font-face code usually has more font formats than you have, such as a .woff version. You can get the full code you need by using this link:

    http://www.fontsquirrel.com/fontface/generator
    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."

  5. #5
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok coverted the font and upload the design at http://12pointwebdesign.co.uk/botch/ and used the custom code that fontsquirrel provided, but no change. I've tested it in IE and same problem. I don't know if it will do this for you but for me it takes a few seconds for the text to appear before it comes in Times New Roman, so maybe it is downloading? Maybe the font just can't work online. NOTE: It should be applying to the "Hello World" and the sidebar headers.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I think you are on the right track, but you need to update your file paths. You've placed the fonts in the /fonts/ folder, but that's not where you are telling your style sheet to find them. This:

    Code:
    @font-face {
        font-family: 'earthworm_jimregular';
        src: url('jim-webfont.eot');
        src: url('jim-webfont.eot?#iefix') format('embedded-opentype'),
             url('jim-webfont.woff') format('woff'),
             url('jim-webfont.ttf') format('truetype'),
             url('jim-webfont.svg#earthworm_jimregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    should be this:

    Code:
    @font-face {
        font-family: 'earthworm_jimregular';
        src: url('fonts/jim-webfont.eot');
        src: url('fonts/jim-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/jim-webfont.woff') format('woff'),
             url('fonts/jim-webfont.ttf') format('truetype'),
             url('fonts/jim-webfont.svg#earthworm_jimregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    See if that helps.
    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."

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,805
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    From the Chrome/Firefox 'Inspect Element' tools:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...m-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...im-webfont.ttf
    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...im-webfont.svg



    so as Ralph said, the fonts are not being called properly.
    As a side issue - Are you really going to run with the B logo that is WAY to close to WWE for confort?!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by spikeZ View Post
    From the Chrome/Firefox 'Inspect Element' tools ...
    Yes, as noted above, the links are missing a reference to the /fonts/ folder, where the fonts are actually stored. (I tested the updated links, and the fonts are defiantly there. )
    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."

  9. #9
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, as noted above, the links are missing a reference to the /fonts/ folder, where the fonts are actually stored. (I tested the updated links, and the fonts are defiantly there. )
    Previously they were pointing to the Fonts folder, after I replaced it witht he custom squirrel code I forgot to update the links, now it appears to be working Thanks for the input!

    Quote Originally Posted by spikeZ View Post
    From the Chrome/Firefox 'Inspect Element' tools:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...m-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...im-webfont.ttf
    Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/...im-webfont.svg



    so as Ralph said, the fonts are not being called properly.
    As a side issue - Are you really going to run with the B logo that is WAY to close to WWE for confort?!
    It's just a design, I noticed the Botchamania guy say he wanted to update his site so I thought I'd give it a shot since I had some free time and I thought the logo would be funny. I don't know the specific laws since he has T-Shirts using the Wrestlemania logo design, but if it's an issue it can be removed, just thought the site could use a smaller logo instead of the whole title. I thought it came out pretty well at least, thanks for your input.

  10. #10
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,805
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by darkwarrior View Post
    It's just a design, I noticed the Botchamania guy say he wanted to update his site so I thought I'd give it a shot since I had some free time and I thought the logo would be funny.
    It made me smile

    Quote Originally Posted by darkwarrior View Post
    I don't know the specific laws since he has T-Shirts using the Wrestlemania logo design, but if it's an issue it can be removed, just thought the site could use a smaller logo instead of the whole title.
    In essence you can't use someone else's design, change an element and put it out onto the public market. Its the same as the Rolox Watches, Popsi Cola and iPhoen 'brands'!


    Quote Originally Posted by darkwarrior View Post
    I thought it came out pretty well at least, thanks for your input.
    It came out really well!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  11. #11
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    It made me smile



    In essence you can't use someone else's design, change an element and put it out onto the public market. Its the same as the Rolox Watches, Popsi Cola and iPhoen 'brands'!




    It came out really well!
    Well I'll knock it together, if he wants to keep the logo he can, if not, the site goes on my portfolio either way. Thanks again guys.


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
  •