Since starting at my new place the design team have been developing website designs for me to implement. In the past the designers I have worked with have been web designers and so have accepted that you can only use a few fonts, verdana, arial, times, etc. However the new team are graphic designers and as such love using custom fonts in the layouts.
Previously I would have just picked the closest web safe font and used that but being new and wanting to create a good impression, I thought I’d do some research and find out if it was possible. Turns out it is. The first thing you need to do is get your font in the correct format. Depending on what format your font is in you should be able to convert it to the two types you need, TTF (True Type Font) and EOF (Embedded Open Type) using the excellent Online Font Converter website. Once done all you need is to use some CSS in your stylesheet.
@font-face
{
font-family: "font_name";
src: url('font_name.eot');
src: local(font_name), url('font_name.ttf') format('opentype');
}
All you then need to do is declare it for the various CSS definitions:
body,p
{
font-family: font_name, Verdana, Arial, Helvetica, sans-serif;
}
And there you go. I’ve tested this on my Mac using Firefox and Safari, Windows using IE8 and my iPhone. It didn’t work on the iPhone but using the above example, defaulted back to Verdana which is close to the test font I was using, Myriad-Pro. As long as you choose a similar looking font to specify after your custom font in the font-family you should be OK.