@font-face problems

Right now I'm trying desperately to get @font-face to work in my website. This is the code I am using right now.

@font-face {  
font-family: romeral;  
src: url(fonts/romeral.otf ) format("opentype");  
}

And then....

h1 {
font-size:2.5em;
font-family:romeral;
}

I am using the font Romeral. Here's a link to it: http://www.smashingmagazine.com/2007/02/06/freefont-of-the-week-romeral/

For some reason it jus开发者_如何学Pythont won't work. It won't render the font on the page. I've tried using other fonts like Ripe, and they work. I've made sure I don't have any spelling errors. What I'm wondering is if there is a restriction that some fonts use to stop people from using their fonts with @font-face. Or maybe I've made an obvious mistake in my code.

Thanks in advance.

This should work (Enter the names in "")

@font-face {  
font-family: "romeral";  
src: url("fonts/romeral.otf") format("opentype");  
}

Does your browser support opentype, you're not using IE are you? In that case you need WEPT fonts.

You might need to generate other font formats for other browsers as well and not just rely on opentype format. Good tutorial here: Custom fonts using @font-face

I've a solution on this. At first all you have to do is convert your font to .EOT and .WOFF. Then you can use your custom fonts.. Here is a working post for your reference..

http://blog.totusinfo.com/css-html-custom-fonts-on-web-page/