Code for using ANY font in site?

I have been looking for the easiest way to make any font of my choice display on my site.

I found some guides for this but they did not explain it right.

All i am trying to do is change the font for just the header of one of my domains.. a joomla site.

The font is berlin and i want it to show without people having to install it themselves, maybe like an autoinstall? Any ideas?

 

Probably the best way to do this is by dynamically generating it with Flash. It's not as hard as it sounds. Google 'sIFR'

 

i was going to use flash.. but isnt that bad for the search engines? They dont read flash and i need it to be SEO friendly

 

Why not just use an image? Add some fancy CSS of JS and you can have a text version show for the SE's.

 

I could use an image.. but isnt that bad for SE?

 

As I said, if you use CSS or JS to make the image only appear to the bots and show standard text to your users, you will be fine.

To be honest even if you just use alt text you will be fine as well.

 

As Carlito and mad4 said, you're going to want to use either SiFR or CSS image replacement techniques.

SitePoint has an excellent article on how to do the latter.

Basically this is what you want to do. Take an element, say a H1, and stick an empty SPAN inside of it, like this:

<h1><span></span>Heading Text</h1>

Code (markup):

Then, in your stylesheet, use the following CSS:

h1, h1 span {
    background: url('/path/to/image.ext') top left no-repeat; /* setting no-repeat isn't necessary, but better to be safe than sorry; also, replace /path/to/image.ext with the path to your image, and the proper file name, like /images/header.jpg for example */
    height: 80px; /* just an example height */
    overflow: hidden; /* to keep the text from spilling out of the container when resized */
    width: 776px; /* just an example width */
}

h1 span {
    display: block; /* turn the SPAN into a block-level element */
    margin-top: -80px; /* equal to the height of the image */
    position: relative; /* you'll need this for the next style property */
    z-index: 1; /* to layer the SPAN over the H1 */
}

Code (markup):

Bear in mind that while accessible, and keeping the text, you'll have one drawback to this. You CANNOT under ANY circumstances use an image with a transparent background. You'll quickly find that the text will bleed through if you do.