I am having a Dickens of a time trying to get Myriad Pro Light to display on a web page.

This web site will run off a local computer, so we don't have to download fonts from the web. Even so, I have tried all that @font-face stuff without success.

I'd like to use Myriad Pro Light on my Mac. This is the file name: MyriadPro-Regular.otf This is what Apple's Font Book says about it:

    PostScript name:    MyriadPro-Light
Full name:  Myriad Pro Light
Family: Myriad Pro
Style:  Light
Kind:   OpenType PostScript

I'd like to make all tags display this font. The font is installed on my computer. Can I just use something like this:

body { font-family: MyriadProLight; }


Should the name be in double-quotes? Should I use the hyphenated name? Do I need to use the @font-face style, so it is something like this?:

@font-face { font-family: MyriadProLight; font-style:normal; src: local("MyriadPro-Light"), url(../fonts/"MyriadPro-Light.otf") }

assuming I have put a copy of the font at the root directory of the site in a folder named "fonts" ?

Oh! I'm going to use Firefox 5.


1 answer


Okay, finally got it. I don't need @font-face if the font is already on my computer. I need to use the "Full name", which, in this case is: "Myriad Pro Light". And, I can't put it in the body tag, it has to either be targeted to the specific tag, like "h1"; or, to a universal reset, like "*".

Further, I have to add "font-weight: lighter;". Sheesh! So, the CSS looks like this:

 * { font-family: "Myriad Pro Light";  font-weight:lighter; }

Next, I tried this with Helvetica Light and Helvetica Light Condensed. Worked with Helvetica Light, but did not work with "Helvetica Light Condensed" or "Helvetica Condensed Light". The latter is how Apple calls the "Full name" of the font.

So, it looks to me as if this is a bit hit or miss.

Answered about 8 years ago by Bob Faulkner