CSS - Custom Fonts?

Question

Hi,

I have a design and Myriad Pro is required. This isn't a problem. The issue is that in Photoshop they have used 'Bold Condensed'. I am not sure what this is called, I think it is one of the varients of Myriad Pro. What is the best way to emulate this on a website?

Thanks.

Answer 1

The 100% guaranteed way is to render it to an image.

CSS3 supports font-face but this will not give you wide support.

@font-face
{
  font-family: 'Myriad Pro';
  src: url('Myriad-Pro.ttf');
}

You will also need to check legal agreements to see if they allow embedding this font in your pages.

Answer 2

FontSquirrel is your best resource. Their "@font-face generator" creates code that will work with all the modern browsers.

What they do is well-explained but behind the scenes it's pretty complicated. You can read up on the CSS aspects on Paul Irish's blog.

Edit

I just realized that nobody has answered your real question...

1.) Myriad Pro is a family of fonts, implemented as a collection of files, with names like Myriad Pro.otf, Myriad Pro Bold.otf, and so forth. (The actual names are OS-specific.) Myriad Pro Bold Condensed is one of those files. I don't know if it comes with the standard package or whether it costs extra.

2.) You cannot "emulate" this. You can either use the actual font on your webpage (via the @font-face embedding method described above), or create a graphic. The designers probably expect you to create graphics, because designers [tirade deleted] when it comes to implementation.

3.) As has been pointed out, embedding supposedly requires an appropriate license, and I don't know you can get such a license for this particular face. ("Supposedly", because [tirade deleted], but I'm not a lawyer.)

Answer 3

You could also try Shaun Inman's sIFR3, although CSS3 is likely to be the better alternative.