Skip navigation
DWguy
DWguy
Currently Being Moderated

Dreamweaver CS5.5 not displaying fonts correctly in live view

Feb 27, 2012 11:48 AM

Tags: #html #cs5.5 #dreamweaver #css #dreamweaver_cs5 #navigation #font_preview

I've integrated some web fonts into my website, which display properly in every browser on my computer (and more importantly) on on other computers properly; strangely enough, Dreamweaver CS5.5's live view doesn't display them as they should be displayed. The font Raleway is displayed as Times New Roman, and League Gothic as Helvetica. Stranger still, Ubuntu, which I use for my <body> element in general, works fine in all weights and styles. Any advice on how to get the other fonts to work properly?                    

3288 Views   14 Replies   Latest reply: James Church, Jul 18, 2012 10:09 AM
 
Replies
  • teedoffnewbie
    Currently Being Moderated
    1. teedoffnewbie,
    Feb 27, 2012 11:57 AM   in reply to DWguy
    Report

    So if everything renders fine in all the major browsers, does it matter the Live View doesnt? Live View is notoriously NOT a good example of browser rendering, and should not be used as such.

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    2. DWguy,
    Feb 27, 2012 11:58 AM   in reply to teedoffnewbie
    Report

    Actually, it does matter. If your page includes a lot of typography or is designed around a certain font, proper font rendering is crucial.

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    3. John Waller,
    Feb 27, 2012 12:02 PM   in reply to DWguy
    Report

    Can you post a link to your website so we can check it out and see if it works at our end?

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    4. DWguy,
    Feb 27, 2012 12:04 PM   in reply to John Waller
    Report

    http://theapplenewsreel.com/Kindle4.html
    Is an article which uses both Ubuntu (for the body) and League Gothic for the titles. I tried it out in BrowserLab, and it seems to work in everything except IE6, but that'e IE6.

     
    |
    Mark as:
  • teedoffnewbie
    Currently Being Moderated
    5. teedoffnewbie,
    Feb 27, 2012 12:06 PM   in reply to DWguy
    Report

    Yes but the fact is, Live View should never be relied upon for acurate testing of browser rendering. Live testing in real time browsers should always be the default test.

     

    But as John said, post a link so we can see if its working for us.

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    6. DWguy,
    Feb 27, 2012 12:50 PM   in reply to teedoffnewbie
    Report

    That really seems wierd; I mean, if Adobe's going to include a pseudo-design-dedicated mode, they should make it on par with at least Firefox 3.0. But oh well, I guess I'll have to wait and see if they integrate this feature in CS6.

     
    |
    Mark as:
  • teedoffnewbie
    Currently Being Moderated
    7. teedoffnewbie,
    Feb 27, 2012 12:53 PM   in reply to DWguy
    Report

    lol Yes I've always wondered why the Live View isn't more representative of what the browser would render. I guess, since there are many differences in how elements are rendered in different browsers, they just did the best they could with Live View. Maybe someone with much more hands on knowledge could explain this.

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    8. Rik Ramsay,
    Feb 27, 2012 1:35 PM   in reply to DWguy
    Report

    Your webpage doesn't seem to have those fonts (Raleway, League Gothic) included in either the stylesheets or the HTML. You have 2 separate links to stylesheets with Google fonts included - are these supposed to be the fonts you are referencing?

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    9. DWguy,
    Feb 27, 2012 1:38 PM   in reply to Rik Ramsay
    Report

    That's because the page I linked to doesn't include Raleway. But Ubuntu (all styles) and Raleway are @font-face, located on my site's server. League Gothic is a Google Web font, and I think Exo is as well.

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    10. Rik Ramsay,
    Feb 27, 2012 1:53 PM   in reply to DWguy
    Report

    In order for us to help you, we need to see the code of the problem in question. If neither of the problem fonts are on the website, it's kind of irrelevant to post a link to it.

     

    Does Exo work in Live View? My suspicion is that you are missing one or more variants of the font. Live View requires the .ttf variant to preview the font, IE requires the .eot variant and the other 2 (.woff and .svg) are for the remainder of the browsers.

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    11. DWguy,
    Feb 27, 2012 1:59 PM   in reply to Rik Ramsay
    Report

    The code for Exo is simply a link in the <head> element to Google Web Fonts; <link href='http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700 ,800,900,400italic' rel='stylesheet' type='text/css'>

    Same goes for Open Sans Condensed (sorry, I confused it with League Gothic in earlier comments): <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>

     

    The code for Raleway, Ubuntu and Museo is here:

     

     

    @font-face {
        font-family: "Ubuntu";
        font-style: normal;
        font-weight: 300;
        src: local("☺");
        src: url(/webfontkit-20111222-160801/ubuntu-r-webfont.eot) format("woff");
        src: url(/webfontkit-20111222-160801/ubuntu-r-webfont.svg) format("svg");
}
@font-face {
        font-family: "Ubuntu";
        font-style: italic;
        font-weight: 300;
        src: local("☺");
        src: url(/webfontkit-20111222-160801/ubuntu-ri-webfont.eot) format("woff");
        src: url(/webfontkit-20111222-160801/ubuntu-ri-webfont.svg) format("svg");
}
@font-face {
        font-family: "Ubuntu";
        font-style: normal;
        font-weight: 500;
        src: local("☺");
        src: url(/webfontkit-20111222-160801/ubuntu-b-webfont.eot) format("woff");
        src: url(/webfontkit-20111222-160801/ubuntu-b-webfont.svg) format("svg");
}
@font-face {
        font-family: "Museo";
        font-style: normal;
        font-weight: 300;
        src: local("☺");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_1_0.ttf) format("ttf");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_1_0.eot) format("eot");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_1_0.woff) format("woff");
}
@font-face {
        font-family: "Museo";
        font-style: normal;
        font-weight: 500;
        src: local("☺");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_2_0.ttf) format("ttf");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_2_0.eot) format("eot");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_2_0.woff) format("woff");
}
@font-face {
        font-family: "Museo";
        font-style: normal;
        font-weight: 700;
        src: local("☺");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_0_0.ttf) format("ttf");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_0_0.eot) format("eot");
        src: url(/MyFontsWebfontsOrderM3529046/webfonts/201E4B_0_0.woff) format("woff");
}
@font-face {
          font-family: "Raleway";
          font-style: light;
          src: local("☺");
          src: url(/webfontkit-20120225-212056/raleway-thin-webfont.ttf) format("ttf");
          src: url(/webfontkit-20120225-212056/raleway-thin-webfont.eot) format("eot");
          src: url(/webfontkit-20120225-212056/raleway-thin-webfont.woff) format("woff");
}

    As you can see, these do reference TTF fonts on my remote server, as well as in my local folder (which mirrors my remote server, obviously).

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    12. Rik Ramsay,
    Feb 27, 2012 2:47 PM   in reply to DWguy
    Report

    This one is a strange issue. Your website seems fine to me in Live View when I copy/paste the html and css - looks almost exactly the same as it does in FF/Chrome for me. I also tested this with a previous project of mine and the most common way for the get Live View to stop showing the fonts, was to remove the .ttf reference or move the fonts folder. I am assuming of course that the 2 fonts are referenced in your css styles? p {font-family: "Raleway", Helvetica, Sans-serif;"}

     

    Only other thing that comes to mind is that your font settings in DW are not the same as the website you are trying to view. In preferences > font it should be set to UTF. See below screenshot. This one is kinda clutching at straws as it's rarely the problem.

     

    DW_pref.jpg

     
    |
    Mark as:
  • DWguy
    Currently Being Moderated
    13. DWguy,
    Feb 27, 2012 2:51 PM   in reply to Rik Ramsay
    Report

    I tried that. Unfortunately, to no avail. Frankly, I don't mind that much at this point, I've learned to compensate for the larger width of Helvetica as compared to Open Sans Condensed. I'll just wait until an update comes along to patch this, or see if CS6 solves the issue. Thanks anyway.

     
    |
    Mark as:
  • James Church
    Currently Being Moderated
    14. James Church,
    Jul 18, 2012 10:09 AM   in reply to Rik Ramsay
    Report

    Thanks. I was having this issue – Live view not displaying my @font-face custom font, however adding the .ttf file sorted it out.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points