@font-face not working, need help please

I would like to use @font-face to be able to specify a fancy font in places on my forum. I am using Safari Version 3.2.1 and Firefox-Mozilla/5.0, and @font-face examples on other pages have worked in my browsers.

I saw it used in the following code:
@font-face
{
font-family : 'Perfect DOS VGA 437';
src : url('http://www.sigvatr.com/dosfont.ttf');
}


That font is not on my computer, so to test the code, I used it exactly as presented above. I put that in my CSS and then assigned that font to a class just to see if it would work, and it did, perfectly.

I didn't want to steal anything, so I took it right down and tried using the font I wanted, which is CygnetRound, a free font readily available all over the place. The forum I am working on only allows jpgs and gifs to be uploaded, so I uploaded it to sixpop, a free server that would allow ttf files. Since the DOS VGA font was not on the same server as my forum and it worked, I wasn't worried about it having to be on the same server as the forum.

@font-face {
font-family: 'CygnetRound';
src: url('http://sixpop.com/files/1514/CygnetRound.ttf');
}
.maintitle {
font-family : CygnetRound, Cursive, Serif;
vertical-align : middle;
text-align : center;
font-size : 26px;
color : #fafbea;
background-color : #d4d0a0;
}


I thought I was good because it looked like the DOS VGS example, but it didn't work.

Reading more, I thought that perhaps it was a font that wasn't allowed to be used with @font-face, so I found one where the license specifically grants permission to embed it in web pages using @font-face: pykes_peak_zero.otf

Obviously, I'm doing something wrong and would greatly appreciate help with this.

Here is a link to my forum: "Glass Slippers and Fairy Godmothers" (http://z6.invisionfree.com/GlassSlippers/index.php?http://z6.invisionfree.com/GlassSlippers)

It's provided by a service called Invisionfree, and while I can play with the CSS, I have no control over the HTML unless I add some. I did, and you can see it inside of two fucia-bordered boxes in the form of @font-face tests.

Unfortunately, I can no longer demonstrate that it did at least work once with original example using 'Perfect DOS VGA 437' because it no longer resides at its url ('http://www.sigvatr.com/dosfont.ttf'), and I can't find another live example to use anymore, so all I have are the two that I tried and that failed.

Below is HTML I added and the part of the CSS that I had hoped would cover this:

<center>
<div class="fonttest1">This should appear in the font "pykes peak zero," and not in Times or any Serif font. </div></center>

<center>
<div class="fonttest2">This should appear in the font "CygnetRound," and not in Ariel or any other Sans-Serif font. </div></center>


@font-face {
font-family: "pykes peak zero";
src: url("http://sixpop.com/files/1514/pykes_peak_zero.otf");
}

@font-face {
font-family: 'CygnetRound';
src: url('http://sixpop.com/files/1514/CygnetRound.ttf');
}

form {
display : inline;
}
img {
vertical-align : middle;
border : 0;
}
BODY {
font-family : Verdana, Tahoma, Arial, sans-serif;
font-size : 11px;
color : #9a9664;
margin : 30px 10px 30px 10px;
background-color : #e4e1be;
background-image : url(http://209.85.48.9/14646/162/upload/p315947.jpg);
background-position : center top;
background-attachment : fixed;
}
TABLE, TR, TD {
font-family : Verdana, Tahoma, Arial, sans-serif;
font-size : 11px;
color : #9a9664;
}
a:link, a:visited, a:active {
text-decoration : none;
color : #807C49;
}
a:hover {
color : #bcb886;
text-decoration : none;
}
.fonttest1 {
font-family : "pykes peak zero", Times, Serif;
font-size : 14px;
color : #000;
background : #FFF;
border : 3px solid #990033;
padding : 6px;
}
.fonttest2 {
font-family : CygnetRound, Ariel, Sans-Serif;
font-size : 18px;
color : #000;
background : #FFF;
border : 3px solid #990033;
padding : 6px;
}

If you are only testing in FF and Safari than I don't see why what you have shouldn't work. Maybe you just need the format('truetype') on that. I was just testing out @font-face this weekend and dug up lots of info about. Here is the syntax I am using and it works perfectly for me.

@font-face {
font-family: 'Aurulent Sans';
src: url('/assets/AurulentSans-Regular.eot');
src: local('Aurulent Sans'), local('AurulentSans-Regular'), url('/assets/AurulentSans-Regular.ttf') format('truetype');}
@font-face {
font-family: 'Aurulent Sans';
src: url('/assets/AurulentSans-Bold.eot');
src: local('Aurulent Sans Bold'), local('AurulentSans-Bold'), url('/assets/AurulentSans-Bold.ttf') format('truetype');
font-weight: bold;}
@font-face {
font-family: 'Aurulent Sans';
src: url('/assets/AurulentSans-BoldItalic.eot');
src: local('Aurulent Sans BoldItalic'), local('AurulentSans-BoldItalic'), url('/assets/AurulentSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;}
@font-face {
font-family: 'Aurulent Sans';
src: url('/assets/AurulentSans-Italic.eot');
src: local('Aurulent Sans Italic'), local('AurulentSans-Italic'), url('/assets/AurulentSans-Italic.ttf') format('truetype');
font-style: italic;}


Tested in ie8/7/6 and Firefox, Should be working in Safari and Opera as well..
Here is an up to date guide (http://randsco.com/index.php/2009/07/04/p680) to using @font-face. That should tell you most everything you need to know.

I am thinking of removing all the src: locals because I noticed that some computers have wrong versions of fonts installed. Fonts that had their names messed up through semi-successful conversions so bold displays italic and regular displays bold. I have seen this problem when converting OTF to TTF and I have seen it on others' computers where they have some messed up version of a font. So personally I think it may be better to just not use their local fonts at all (of course you weren't using src: locals anyway so maybe you should try adding them and see if it helps).

Your page and fonts are fine in Safari4 and Opera10.

Firefox does not allow web fonts unless they are on the same domain as the web page - hence they won't work for you at the moment on FF. If you save a local copy of the font then it should be fine. Safari doesn't apply this restriction.

I guess you may have checked something OK in Safari and then reverted to FF, or something like that.

Thank you both very much for your help!

When I opened the forum after reading your replies, both were indeed working just fine in Safari (though still not in FF, as was explained.) I hadn't done a thing. It must be like when you take a dog to the vet. It was surely sick at home, but once you get to the vet, the dog seems perfectly normal.

SB65, when you suggested saving a local copy of the font, did you mean on my computer or on the server where the forum is hosted? I think you must have meant the latter, and I wish I could do that, but the forum is hosted by Invisionfree and they only allow the uploading of a very few kinds of text and img files (and not even all of those)

Anyway, I immersed myself in the guide that linehand provided, and from there visited many other similar places. Such wonderful information! I was having difficulty in transforming the ttf version of CygnetRound to oef using the various online options and in the search for success there, I ended up at fontsquirrel. CygnetRound was not one of the fonts they offered, but all I wanted was a pretty script, so I downloaded the "Mutlu Ornamental" kit instead because it had very clear permission for use in @font-face embedding and all the coding was already set up. All I needed to do was upload the font versions they supplied and then insert the links.

I thought that if I could get that to work in FF (hoping the workaround presented by the guide would work, but if it won't, it won't) and IE, I would just change from CygnetRound to MutluOrnamental.

I also went to typekit, which was working great last night, but the script font it offers on the trial set-up isn't particularly pretty, and it doesn't seem to be working now.

So, for a recap:
There are now 4 experiments going on on the page:
1) "Pykes Peak" should show up in the first ugly div (coding unchanged and it shows up for me in Safari but not in FF)
2) "CygnetRound" should show up in the second ugly div and in the smaller main headers on the left (coding unchanged and it shows up for me in in both places in Safari but not in FF)
3) "MutluOrnamental" should show up in the third ugly div (new coding added from fontsquirrel but it does not show up for me in Safari or FF)
4) "learning-curve" should show up in the larger main headers on the right (coding and java script added from typekit, was working last night in Safari but isn't working anymore in either one, has substituted one of the cursive fonts from my computer as directed by the CSS) (EDIT: It's showing as "learning-curve" now at home. At work, from where I wrote my answer, is it possible that somehow the filter kept the TypeKit from doing whatever it does?)

<script type="text/javascript" src="http://use.typekit.com/sux3nve.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>


<center>
<div class="fonttest1">This should appear in the font "pykes peak zero," and not in Times or any Serif font. </div></center>

<center>
<div class="fonttest2">This should appear in the font "CygnetRound," and not in Ariel or any other Sans-Serif font. </div></center>

<center>
<div class="fonttest3">This should appear in the font "MutluOrnamental," and not in Ariel or any other Sans-Serif font. </div></center>

<center>
<div class='sidebartitle'>
Special Font
</div>
<DIV class="sidebartable"><span class='desc'>
<br /><img src="http://209.85.48.9/14646/162/upload/p317237.jpg"><br /><br />
This forum uses the font<br />
"CygnetRound."<br /><br />
If the main headings are not<br />
being displayed in the font<br />
pictured above, it (freeware)<br />
can be downloaded from<br /><a href='http://www.fontco.com/font-info/cygnetround.php'>
FontCo.com<br /><br />
Remember to make it available<br />
for your members<br /></a>
</span></div>
</div>
<br /></center>

CSS:
/*
* The fonts included are copyrighted by the vendor listed below.
* @vendor: Gazoz
* @licenseurl: http://www.fontsquirrel.com/license/Mutlu
*/

@font-face {
font-family: 'MutluOrnamental';
src: url('http://sixpop.com/files/1514/Mutlu__Ornamental.eot');
src: local('Mutlu Ornamental'), local('MutluOrnamental'), url('http://sixpop.com/files/1514/Mutlu__Ornamental.woff') format('woff'), url('http://sixpop.com/files/1514/Mutlu__Ornamental.ttf') format('truetype'), url('http://sixpop.com/files/1514/Mutlu__Ornamental.svg
#MutluOrnamental') format('svg');
}
@font-face {
font-family: "pykes peak zero";
src: url("http://sixpop.com/files/1514/pykes_peak_zero.otf");
format("opentype");
}
@font-face {
font-family: 'CygnetRound';
src: url('http://sixpop.com/files/1514/CygnetRound.ttf');
format("truetype");
}

.fonttest1 {
font-family : "pykes peak zero", Times, Serif;
font-size : 14px;
color : #000;
background : #FFF;
border : 3px solid #990033;
padding : 6px;
}
.fonttest2 {
font-family : CygnetRound, Ariel, Sans-Serif;
font-size : 18px;
color : #000;
background : #FFF;
border : 3px solid #990033;
padding : 6px;
}
.fonttest3 {
font-family : MutluOrnamental, Ariel, Sans-Serif;
font-size : 18px;
color : #000;
background : #FFF;
border : 3px solid #990033;
padding : 6px;
}

.maintitle {
font-family : "learning-curve-1","learning-curve-2", Cursive, Serif;
vertical-align : middle;
text-align : center;
font-size : 26px;
color : #fafbea;
letter-spacing : 1px;
margin : 10px 0px 0px 0px;
padding : 20px 3px 3px 3px;
background-color : #d4d0a0;
background-image : url(http://209.85.48.9/14646/162/upload/p316005.gif);
background-repeat : repeat-x;
background-position : center top;
border-bottom : 2px dotted #fafbea;
border-top : 2px dotted #fafbea;
}
.sidebartitle {
font-family : CygnetRound, Cursive, Serif;
vertical-align : middle;
text-align : center;
font-size : 18px;
color : #fafbea;
letter-spacing : 1px;
padding : 18px 3px 1px 3px;
background-color : #d4d0a0;
background-image : url(http://209.85.48.9/14646/162/upload/p316903.gif);
background-repeat : repeat-x;
background-position : center top;
border-top : 2px dotted #fafbea;
border-right : 1px solid #fafbea;
border-left : 1px solid #fafbea;
}

Yeah fontsquirrel is great. Which reminds me. You can actually use base64 to embed the actual font data in the actual css file. The @font-face generator on their site can automatically generate such a css file with the fonts embedded in the css as base64. This could help get around your server not allowing you to host the fonts since the fonts would be inside your css file.

I hesitate to recommend using the base64 method though because I don't know much about it. The css file will become quite large of course and you just need to consider how it will effect performance and such (shouldn't really be larger than the original fonts files though so technically any performance difference should be negligible). Of course you can and should compress such files which may help, but probably no more than if you compressed your font files. It may be worth looking into but you should do some testing and make sure there is no major shortcoming to using the base64 method.

Edit: By the way, a part of your problem may be that you have faulty versions of fonts installed. fontsquirrel is great but their @font-face kits are rife with poorly converted fonts with messed up names. Their @font-face generator on the other hand does an excellent job. So I would recommend removing all the custom fonts from the os (may require reboot to delete certain fonts, and be sure to only delete those custom fonts you know are not default system fonts). Then DL the original TTF or OTF version of the font you want to use (not the @fontface kit) and then use the @font-face generator to convert to just the formats you need (it will also give you the css-rules if you need them).