calligraphy fonts on a website

Question

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?

Answer 1

You can embed TTF font files into CSS.

A good example of it is here:

/* DejaVu Sans 2.24
   http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
@font-face {
    font-family: "DejaVu Sans";
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}

Edit:

Note: This will only work in Firefox, and possibly Chrome.

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:

@font-face {
    font-family: Piefont;
    font-style:  normal;
    font-weight: normal;
    src: url(PIE0.eot);
}

(This was pulled from an official online demo here).

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

Answer 2

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 anyone's 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.

Answer 3

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 static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>

and in the css h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height / h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */

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

Answer 4

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.