if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?

would i be better off putting something together in photoshop and saving as an image?

If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.

If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.

body { font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman" } Its always good to use a backup font that you know will work on anyones machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.

Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:

Based on Boldewyns answer below, I would bet that you could also use a TTF file in the src: parameter.

I tend to use @font-face on my personal websites.. but it depends on what you are doing it for.

First.. the questions. Is this static text or are we talking about post headlines etc.

If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with @font-face

To add to the @font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.

If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.

By posting your answer, you agree to the privacy policy and terms of service.