What is the proper CSS style for "Futura Light"?

Posted on 2011-04-25
Last Modified: 2012-05-11
I am a web developer building a site from a PSD provided by a designer.

The PSD contains the use of the "Futura Light" font but I don't know how to specify that font in my CSS file. I have tried various css designations but they don't appear for me because I don't have Futura Light on my computer.

Can anyone tell me the actual Font style to specify in CSS for Futura Light?

p.s: I also need to know how to specify Futura Book.

Thanks Experts!
Question by:rascal
    LVL 13

    Accepted Solution

    When you specify something like this, it needs to get put in quotes.

    .futura p {
      font-family: "Futura Light", Helvetica, arial, sans-serif;

    Open in new window

    Remember that this is NOT a web safe font. For extended capability, and to make sure your site rendered with the fonts you want, look into SiFR. SiFR uses flash and JavaScript to take a text element and automatically turn it into a flash file that renders the way you want. It is styled with CSS inside the JavaScript. It works great. Plus, since it uses the text already on your page, if flash or JavaScript is disabled in someone's browser, the text renders as it normally would.

    If you want more info on how to use SiFR, we can make that happen.
    LVL 1

    Author Closing Comment

    Thanks jonahzona,

    I will also look into the SiFR - my only question on what would be how it would affect devices that don't handle Flash such as iPad, etc., but I assume it is written to fall back and use the regular CSS if Flash/Javascript is not available.

    On a side note: Should I assume then that the Futura Book font is specified as you mentioned above, only using "Futura Book"?

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now