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

Posted on 2011-04-25
Medium Priority
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

jonahzona earned 2000 total points
ID: 35463967
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.

Author Closing Comment

ID: 35464063
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month12 days, 15 hours left to enroll

578 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