@font-face issues

[Kingcripple]

I'm not a web designer by any stretch of the imagination, but I operate a horror-themed website as a hobby. I've managed to a lot of minor alteration on my own, but I'm having difficulty with one particular area: a custom font. I have the font on my server, but when I try to implement it on my site, specifically with my menu and title of content, I can't seem to get it to work.

I've placed this code within my default.CSS. I've verified that the destination is accurate yet I can't use the font on my website. Any help would be greatly appreciated.

@font-face { 
 font-family: feastofflesh; 
 src: url ('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); 
}

[Frankie]

That can have several causes. If you would have the lot online, that would make it much easier to diagnose.

[RNorskov]

Ud the code you write is the ondt change you have done, you will also need change the font where you want it to be. But a little more detail and it will be much easier to help you

[resdog]

try putting feastofflesh in quotes.

[Kingcripple]

Here's my website – it's currently a work in progress: www.kingcripple.com

I've tried to utilize my custom font, feastofflesh, at the following locations on my website. I've used the code below, but it still doesn't work. I'm not sure what additional information would be helpful in order to solve this problem – I'll provide whatever anyone requests.

.home-title { 
 font-family: 'feastofflesh'; 
}
#nav .sf-menu a { 
 font-family: 'feastofflesh'; 
}

[resdog]

The eot version of the font only works on Internet Explorer:

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.

What browser are you looking at it on? The website you gave did not have the font family applied, so it's difficult to see the problem. since you're using wordpress, can you create a templated page that pulls a different header linked to a different CSS using the font so we can see what code you have?

Normally when you use @font-face, you need to include all the different variations in order for all browsers to render it correctly.

[Kingcripple]

Originally Posted by resdog

try putting feastofflesh in quotes.

I tried this but it didn't help.

Originally Posted by resdog

The eot version of the font only works on Internet Explorer:

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.

What browser are you looking at it on? The website you gave did not have the font family applied, so it's difficult to see the problem. since you're using wordpress, can you create a templated page that pulls a different header linked to a different CSS using the font so we can see what code you have?

Normally when you use @font-face, you need to include all the different variations in order for all browsers to render it correctly.

I'm aware that the current font will only work on IE. I would like to get it to work on at least one browser before I move on to the other browsers. I apologize for not having the font applied when you took a look at my website. I took it down to try and work on something else for a little while, and I suspect you looked at my website during this period of time. I haven't applied now and will leave it applied until the problem is resolved.

Thank you everyone for graciously taking a look at my problem. It's highly appreciated!

[SB65]

I cannot see the @font-face declaration in default.css.

[claire_t]

Interesting thread! Am having similar trouble, so I hope you don't mind me jumping in......

Am using the font minya nouvelle.ttf which shows up fine in browsers except for in IE. What is the best way around this? I can't find a .eot version of this font and obviously can't change the extension. I have tried some font converters online to convert the .ttf to .eot but the .eot version never seems to work.

I have tried using the <!--[if IE]> IE only stuff here <![endif]--> fix, with using an image for IE but can't get this to work either (am prob doing it wrong but I don't know)

Any clues as to what is the best fix for the @font-face not working on a certain browser?

My site ishttp://www.joho-designs.co.uk/

Thanks

[Kingcripple]

Originally Posted by SB65

I cannot see the @font-face declaration in default.css.

I apologize, I had the wrong URL. Take a look at: www.kingcripple.com

Many thanks once again!

[resdog]

try removing the space between url and (:

@font-face { font-family: 'feastofflesh'; src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); }

[Kingcripple]

Originally Posted by resdog

try removing the space between url and (:

@font-face { font-family: 'feastofflesh'; src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); }

I removed the space between but it still didn't work.

[resdog]

Oh, it looks like it's an IE 9 issue, as the font renders perfectly in IE 8 and below. Add this to your css:

src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot'); /* IE9 Compat Modes */
	src: url('http://kingcripple.com/degradationofmorality/fonts/feastofflesh.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

Not sure if that will fix it, but at least now you know it's an issue specific with IE9. If you use the font-face generator http://www.fontsquirrel.com/fontface/generator
to generate all the fonts, you shouldn't have any problems.

[Kingcripple]

Okay, it didn't seem to fix the issue, but when I was looking on font squirrel, which I'm familiar with, I believe it says WOFF is compatible starting with IE9. So, I downloaded the kit based on my font, and I've uploaded all of the additional font types. My problem, however, is I don't know what to make of the CSS font squirrel includes in the kit.

@font-face {
    font-family: 'FeastofFleshBBItalic';
    src: url('feasfbi_-webfont.eot');
    src: url('feasfbi_-webfont.eot?#iefix') format('embedded-opentype'),
         url('feasfbi_-webfont.woff') format('woff'),
         url('feasfbi_-webfont.ttf') format('truetype'),
         url('feasfbi_-webfont.svg#FeastofFleshBBItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

It's my understanding I can change the "font-family" to whatever I want, in this case, feastofflesh, which is in line with the rest of my CSS specifications. I also assume I have to identify the URLs to the four font files. Is my understanding right? If so, I've added the following to my CSS with no change:

@font-face {
    font-family: 'feastofflesh';
    src: url('http://kingcripple.com/degradationofmorality/fonts/feastbi_-webfont.eot');
    src: url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.woff') format('woff'),
         url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.ttf') format('truetype'),
         url('http://kingcripple.com/degradationofmorality/fonts/feasfbi_-webfont.svg#FeastofFleshBBItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

As always, many thanks to those who read and reply.

[Frankie]

Beats me. I checked the path and the presence of the font files, and they are OK. And the only thing I see wrong in your code is the 'FeastofFleshBBItalic' in the svg line, which should be 'feastofflesh'. But the rest seems OK.