14 Replies Latest reply: Jul 18, 2012 10:09 AM by James Church RSS

    Dreamweaver CS5.5 not displaying fonts correctly in live view

    DWguy Community Member

      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?                    

        • 1. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
          teedoffnewbie Community Member

          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.

          • 2. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
            DWguy Community Member

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

            • 3. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
              John Waller MVP

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

              • 4. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                DWguy Community Member

                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.

                • 5. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                  teedoffnewbie Community Member

                  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.

                  • 6. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                    DWguy Community Member

                    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.

                    • 7. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                      teedoffnewbie Community Member

                      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.

                      • 8. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                        Rik Ramsay Community Member

                        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?

                        • 9. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                          DWguy Community Member

                          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.

                          • 10. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                            Rik Ramsay Community Member

                            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.

                            • 11. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                              DWguy Community Member

                              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).

                              • 12. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                                Rik Ramsay Community Member

                                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

                                • 13. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                                  DWguy Community Member

                                  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.

                                  • 14. Re: Dreamweaver CS5.5 not displaying fonts correctly in live view
                                    James Church

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