Font not loading

HTML & CSS
1

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/16595/wormboy_earthworm-jim


@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

What happens if you eliminate this bit?

local(‘fonts/Jim’),

3

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

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

5

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

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:

@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:

@font-face {
    font-family: 'earthworm_jimregular';
    src: url('[COLOR="#FF0000"]fonts/[/COLOR]jim-webfont.eot');
    src: url('[COLOR="#FF0000"]fonts/[/COLOR]jim-webfont.eot?#iefix') format('embedded-opentype'),
         url('[COLOR="#FF0000"]fonts/[/COLOR]jim-webfont.woff') format('woff'),
         url('[COLOR="#FF0000"]fonts/[/COLOR]jim-webfont.ttf') format('truetype'),
         url('[COLOR="#FF0000"]fonts/[/COLOR]jim-webfont.svg#earthworm_jimregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

See if that helps. :slight_smile:

7

From the Chrome/Firefox ‘Inspect Element’ tools:

[SIZE=1][COLOR=#000000][FONT=Menlo][COLOR=red]Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/wp-content/themes/botch2013/jim-webfont.woff[/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Menlo][COLOR=red]Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/wp-content/themes/botch2013/jim-webfont.ttf[/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Menlo][COLOR=red]Failed to load resource: the server responded with a status of 404 (Not Found) http://12pointwebdesign.co.uk/botch/wp-content/themes/botch2013/jim-webfont.svg

[/COLOR][/FONT][/COLOR][/SIZE]

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?!

8

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. :slight_smile: )

9

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 :smiley: Thanks for the input!

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

It made me smile :slight_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!

11

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.