dreamweaver fireworks mx sub menu

[knumme13]

Sub menu works on a macg5. It showed the correct font in IE & Firefox but, doesn't work on the pc the submenu font on IE or Firefox doesn't read the correct font "Futura" which is the same for the nav bar. I work on a mac and don't have dreamweaver for the pc. Do I need to do something with the code to fix this problem.

go to http://www.hollywoodstaging.com/paradigm100.htm


Thanks in advance.
knumme

 

[SrWebDeveloper]

The issue is that font is not standard on Windows.

Short of picking another font, if you love futura and you want MSIE users to be able to view it, then you need to embed the font, which is NOT an easy process in HTML/CSS right now. Step 1 is to create a font file in .eot format (Open Type), step 2 is to add in the approriate CSS and HTML, and step 3 is to upload the font file. The user's browser, only MSIE 4 or later, will download the font and display it based on your CSS, usually a class assigned to a div. None of this is necessary for images, of course, only applying the font to text in HTML, and remember this solution is proprietary to MSIE.

This page sums up the lunacy regarding platforms and font embedding support, meaning which browser supports what and how. It's insane right now.

The problem with eot files is they're hard to find and not free, usually. I looked around for futura.eot and could find nothing, and the common solution is to use WEFT, a tool that runs in Windows only intended to convert true type fonts to Open Type for font embedding. Meaning, feel free to search around for a Mac verson, but WEFT 3 which is available for download here must be run on a Windows machine (i.e. Parallels or FusionWare on a Mac)

Here is sample CSS for steps 2 and 3:

<style type="text/css">

  @font-face {
    /* Give it a name */
    font-family:"Futura EOT";
    font-style:normal;
    font-weight:normal;
    /* Specify relative or absolute url to eot file */
    src: url(futura.eot);
  }

  .futura_big {
    /* Use the same value as @font-face font-family */
    font-family:"Futura EOT";
    font-size:28px;
    color:#000;
  }

</style>

In your HTML:

<div class='futura_big'>This is a test</div>

Remember, this is for MSIE only. The W3C has not officially adopted this method for "easy" font embedding across all platforms, we'll see what the future holds. For now, this is the best choice for MSIE.

-jim