Can't get @font-face to work in "live" testing

[Martin717]

Hello,

I have a site that I designed and recently began having hosted. While the intended font is displaying on my computer, I'm concerned that's because I already have it loaded locally. A friend is checking things on his end with a Mac using Safari, and he's not getting the right font - I chose Century Gothic, and he's seeing Apple Gothic.

When I wrote the pages locally, I was using the following @font-face code:

@font-face {
	font-family: 'Century Gothic';
	src: url('../webfonts/CenturyGothic.eot');
	src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url('../Fonts/CenturyGothic.ttf') format('truetype'), url('../Fonts/CenturyGothic.svg') format('svg');
}

Since having the site "live", I've experimented with the @font-face on one page only, and still can't get it to work. After trying probably a dozen variations, I last left the page with this code:

@font-face {
font-family: 'Century Gothic';
src: url('Fonts/CenturyGothic.eot?');
src: local(☺),
url('Fonts/CenturyGothic.woff') format('woff'),
url('Fonts/CenturyGothic.ttf') format('truetype'),
url('Fonts/CenturyGothic.svg#CenturyGothic') format('svg');
}

...that last code is untested/checked by my friend, though at this point I'm skeptical that it will work. Which leads me to posting this thread here.


I'm not sure if my code is bad, I have something placed incorrectly in the server/folders/etc., or all of the above (and possibly other issues). I ended up not only having a "Fonts" folder with a file for each above filetype in the root/main public folder, but also copied this fonts folder into each other page's folder that makes up the site.

In addition, the reason for the ? in the eot file code is I'm having the site render as IE8 in even IE9 and IE10 browsers (due to an unrelated issue). It was my understanding some older versions of IE need the ? in there for the @font-face to work in them.

I don't know if it matters re my issues, but I have held off on licensing the files for this until I get things working and finished on the site. While it's hosted, it is password protected from the public until I'm ready for that to be. I was going to license the font before going live...

If possible, I greatly prefer not to publicly post a link to my site for now. If anyone here is nice enough to help and needs to see the site to do so, please let me know and I'll PM (or e-mail) you the information to be able to do so...

Thank you!
Martin

[james438]

I am no expert in this area, but I might be able to point you in the right direction. If anyone else is more knowledgeable in this area please feel free to jump in.

Read this: http://www.fontspring.com/blog/fixing-ie9-font-face-problems

What is src: local(smiley face symbol shows up in my browser),?

What is the rest of the css you are using to display the styled text?

I couldn't get the safari browser to connect to the internet on my computer for some reason. Here is an example I tried that worked for me:

<style type="text/css">
@font-face {
font-family: 'cool font';
src: url('../angelicwar-webfont.ttf');
src: url('../angelicwar-webfont.eot');
src: local('cool font'), url('../angelicwar-webfont.ttf');
}
p.custom_font{
font-family: 'cool font';
font-size:52px;
}
</style>
<p class='custom_font'>jgahskd</p>

[Martin717]

James, thanks. I'll take a look through this better later on.

In the meantime, the smiley face is added to tell the computer to reject a local font and load the one connected with the @font-face. This was something I found online that I believe Paul Irish came up with, though I don't want to mis-attribute...

Before I read through the link re IE9 font face problems, I do have my code set to make IE9 and IE10 render as IE8. Does the info in the linked article still apply in my case then?

[james438]

It should still apply although the link deals with font-face problems in IE6-IE9. I do not have much access to IE9 or IE10, so I can't really test it out unfortunately. Please let me know how things come along.

[Martin717]

I will - I appreciate the help! I have had zero experience in any of this before diving in head first to design a site for an (unrelated) business I've been putting together. I'm fussy in that I want things to look a certain way, so it's important to me to get the @font-face working...

[james438]

When I was working with @font-face I found documentation on this was hard to find, so I can understand the frustration.

I want to add that last I checked @font-face and font manipulation in general is not an option at this time for browsers in mobile devices. I suspect that as browser technology in mobile devices improves this will become available. In my case what I ended up doing was using a png image of the font character I needed. By mobile devices I am talking about phones, ipads, etc.

EDIT: Be sure to test this in IE10. I remember having specific problems with that version of IE, but I was able to get it to work when I finally got a hold of a laptop with IE10 on it.