@font-face problems

Question

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 just 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.

Answer 1

This should work (Enter the names in "")

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

Answer 2

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

Answer 3

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

Answer 4

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/