Myriad pro font does not appear on Safari

Question

Hi all

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 make the Myriad Pro font appear on Safari.

thanks

Answer 1

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.

Answer 2

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;

Answer 3

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;
}