Myriad pro font does not appear on Safari

I have an asp.net page with an asp.net menu.

I defined the font in the menu items to be Myriad Pro.

In IE and Firefox it appears normally, but in Safari the menu items appear blank.

when I changed the font type to another font it worked fine.

so is there a way to 开发者_StackOverflow社区make the Myriad Pro font appear on Safari.

thanks

As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:

@font-face {
   font-family: "CustomMyriadPro";
   src: url("path/to/myriadpro/font.otf") format("opentype");
}

h2 {
   font-family: "CustomMyriadPro", Helvetica, Georgia;
}

Make sure your CSS specifies Myriad Pro in quotes, i.e.

font-family: "Myriad Pro", sans-serif;

Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using @font-face), so you always need to define some fall-back fonts, e.g.

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.

The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.

Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0

According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.

If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through @font-face font-embedding (thanks Olly!) instead.

Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro