Font embedding in CSS

I'm about to use some custom fonts for my website. I know that currently there are few websites providing free webfonts like: Google WebFonts

But, the font I wa开发者_开发问答nt isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)

Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?

Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a @font-face generator that will help you set things up.

Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use

@font-face {
    font-family: {given name};
    src: url({path to font file}) format('truetype');
}

Then use

font-family: {given name};

in any rules you want to use the font for.

I've previously used Font Squirrel to generate the web font files from a ttf.

I would recommend trying Cufon as a fallback for browsers that don't support css @font-face

You can just use the ttf files in combination with @font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.

This might be of use -

make sure the license for the font you are using allows it though.