Jump to content

Which is the best font embeding method today?


Recommended Posts



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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by akurtula
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...