Font embedding in CSS

2
votes

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 want 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?

6
cssfont-face

6 Answers

4
votes

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.

2
votes

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.

1
votes

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

1
votes

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

0
votes

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

0
votes

This might be of use -

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