CODEWITHSUNDEEP
cssfonts
ComputerUser
ComputerUser

Reputation: 4878

CSS - Custom Fonts?

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.

Upvotes: 5

Views: 11333

Answers (4)

egrunin
egrunin

Reputation: 25053

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 if you can get such a license for this particular face. ("Supposedly", because [tirade deleted], but I'm not a lawyer.)

Upvotes: 17

Artur Michalak
Artur Michalak

Reputation: 459

However, see license first. In many cases you can not use @font-face.

Here is post on adobe about myriad license for web. http://forums.adobe.com/message/3654436

Upvotes: 0

Christoph Lupprich
Christoph Lupprich

Reputation: 1190

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

Upvotes: 1

user151323
user151323

Reputation:

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.

Upvotes: 1

Related Questions