Lucida grande font isn't light enough

Question

I have designed a template in wordpress and now I'm writing it in css/html but it seems the browser isn't using my font.

Photoshop:

Browser:

This is my css

h1 { font-size: 34px; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-weight: 100; }

The font in photoshop is Lucida Grande regular.

Answer 1

Never use platform-specific fonts ( Mac-only / Windows-only fonts ) in website; it's quite different in representation between browser & the operating system itself. If a visitor of your website does not have the font, it will fallback to next font specified in your font-family font stack.

It's suggested to use web fonts in website. You can find similar font in Google Fonts as alternative.

Yet, the above does not apply to most of the non-Unicode languages, especially CJK (Chinese, Japanese and Korean. Take Chinese as example, since Chinese has a wide range of characters, it is not feasible to make a web font for Chinese, as the file size of the font will be very large. (there are some Chinese web fonts, but most of them are >10MB; no visitors have patience to wait a font to load for a minute before they can read a pretty font)

Answer 2

Thanks to all answers. I fixed it using the "Lucida Sans Unicode" font and the "letter-spacing" css property.

For everyone that have my same problem, here's my solution.

h1 { font-family: 'Lucida Sans Unicode', sans-serif; font-size: 34.14px; text-align: center; font-weight: 100; letter-spacing: 0.6px; }