CODEWITHSUNDEEP
cssfont-face
codedude
codedude

Reputation: 6519

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

Upvotes: 0

Views: 1542

Answers (4)

Raju Sarvasiddi
Raju Sarvasiddi

Reputation: 441

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/

Upvotes: 0

endyourif
endyourif

Reputation: 2202

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

Upvotes: 0

SpliFF
SpliFF

Reputation: 38976

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

Upvotes: 0

N 1.1
N 1.1

Reputation: 12524

This should work (Enter the names in "")

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

Upvotes: 2

Related Questions