...

View Full Version : @font-face issues



Kingcripple
11-22-2011, 12:13 AM
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
11-22-2011, 01:05 AM
That can have several causes. If you would have the lot online, that would make it much easier to diagnose.

RNorskov
11-22-2011, 08:44 AM
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
11-22-2011, 09:46 PM
try putting feastofflesh in quotes.

Kingcripple
11-22-2011, 09:55 PM
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
11-23-2011, 02:33 PM
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
11-23-2011, 06:17 PM
try putting feastofflesh in quotes.

I tried this but it didn't help.


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
11-23-2011, 06:46 PM
I cannot see the @font-face declaration in default.css.

claire_t
11-23-2011, 07:29 PM
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
11-23-2011, 07:56 PM
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
11-23-2011, 08:44 PM
try removing the space between url and (:



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

Kingcripple
11-23-2011, 09:03 PM
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
11-23-2011, 09:59 PM
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
11-23-2011, 11:16 PM
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
11-24-2011, 12:42 PM
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.

SB65
11-24-2011, 04:26 PM
Your page works for me in IE8 and IE7 mode through IE8, plus Chrome and Safari and Opera. It fails in FF7 and IE9.

If I create a test page (here (http://www.simonbattersby.com/test/fontface/)) usingthe @font-face css you posted and font files then it works in all the above browsers.

However, I see your live css is actually:


@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;
}

I suspect these are being interpreted as a different domain by IE9 and FF7 and failing for that reason - your site forces www.kingcripple.com. FF and IE9 enforce same domain for @font-face. Have a try removing the absolute URLs:


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


Incidentally, I noticed you have:


body {
font: 12px 'Times New Roman,feastofflesh';
}

which will look for a font called Times New Roman,feastofflesh. This should correctly be:


body {
font: 12px 'Times New Roman',feastofflesh;
}

Font names with spaces in them need to be enclosed in quotes, otherwise quotes are not required.

Kingcripple
11-28-2011, 06:33 PM
So, the above corrections worked for my website, and I thought the whole @font-face direction would be quick and easy to use once I had it all figured out I was wrong. I went to try a different font on my website using the above corrections, and it didn't work. I'm not sure exactly what went wrong or why anything would change for a different font when using the font-squirrel kits, but they did.

I've placed the following in my default.CSS:



@font-face {
font-family: 'typewriter';
src: url('/degradationofmorality/fonts/1942-webfont.eot');
src: url('/degradationofmorality/fonts1942-webfont.eot?#iefix') format('embedded-opentype'),
url('/degradationofmorality/fonts1942-webfont.woff') format('woff'),
url('/degradationofmorality/fonts1942-webfont.ttf') format('truetype'),
url('/degradationofmorality/fonts1942-webfont.svg#1942report1942report') format('svg');
font-weight: normal;
font-style: normal;
}

I also have the following is my user.CSS:



.home-title {
font-family: typewriter;
font-size: 40px
}
#nav .sf-menu a {
color: #fff;
margin: 0 10px;
font-size: 18px;
font-family: typewriter;
}
body {
font: 12px 'Times New Roman',typewriter;
}

SB65
11-29-2011, 09:19 AM
If your css worked for the earlier font but not this one, then there's either something wrong with the font or with your css. Second is more likely.

So, check your @font-face statement again - other than the first statement it looks like you're missing a / in your path.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum