Which is the best font embeding method today?

[akurtula]

Hi

 

I normally use the image replacement method which text is indented to -9999px and adding the images. Though I know there are other methods, and the @font-face which sounds very cool, then there is the other one with flash (though never used that)

 

We are in 2011 and I have google searched this topic and everything seems to have been written in 2009 - So because there is a very big difference between web today and the web of 2009, Which font embeding method is most reliable to use today

 

Thanks a lot

[Wickham]

I use @font-face. It used to be only supported by IE but is now supported by all the major browsers, provided you have the font in several formats.

 

See http://www.miltonbayer.com/font-face/

and kits with instructions from here http://www.fontsquirrel.com/fontface

 

The complicated Flash and javascript methods like cufon and sIFR seem to be going out of fashion.

[falkencreative]

I should also mention -- there are online services like Typekit that can help with font replacement: http://typekit.com/ http://fontdeck.com/ etc. It's another option if @font-face has issues/you don't want to go that direction. I'm not a big fan of flash based text replacement like Cufon/sIFR. The way I figure it, the less Flash, the better.

[akurtula]

That's very helpful

 

I think I read somewhere that you need to have permission (copyright) to use the font in the website.

 

I want to use @font-face only for my personal projects. Overall is there any copyright laws that I need to be careful about or have I misread what every I am referring to.

 

Also you mentioned that the flash based method is out of fashion, do you think that the image replacement method is out of fashion as well? as I have few sites in my portfolio that I have used that method

 

Thanks for the advice

Edited October 6, 2011 by akurtula

[Susie]

Lately, I've been importing Google fonts with a line in the CSS file like this:

 

@import url(http://fonts.googleapis.com/css?family=Spinnaker);

 

And then you can just include it in your font-family line like this:

 

font-family: 'Spinnaker', sans-serif;