Skip navigation
Currently Being Moderated

Why can't I preview TypeKit fonts in Dreamweaver CS6?

Sep 1, 2012 7:09 PM

Tags: #dreamweaver #cs6 #localhost #typekit

• • • • • • • • •

 

Hey Everyone,

 

Simple task, yet so difficult to achieve: I am using Dreamweaver CS6 to built my website. I have the 'Museo-Sans' Font Family published to my website via TypeKit. In Dreamweaver, after adding the JavaScript line to the head of the document and refrencing the webfont in CSS, there is no way for me to see the actual font whether I live preview or view it in my browser. It only shows up it I upload it to my web server. Its impossible to upload to my web server each time just to see what the site looks like with that font. I even added the 'localhost' and '127.0.0.1' IP in the Kit Settings of TypeKit. Nothing shows the actual font in dreamweaver.

 

I've spent my entire Saturday trying to achieve this simple task, with no success - its beginning to discurage me, and I'm almost ready to make all text an image, and be done with this unnessecary headache.

 

I would be very appreciative of any help anyone might have on the topic!

 

Thanks kindly,

 

Dustin

 

• • • • • • • • •

 
Replies
  • Currently Being Moderated
    Sep 2, 2012 4:33 AM   in reply to DustinWilliam

    The answer is in this Adobe TV video by Paul Trani: http://tv.adobe.com/watch/creating-for-mobile-and-tablets/adding-custo m-fonts-using-typekit/.

     

    The answer comes right at the end of the video. In a nutshell, adding localhost to your Kit Settings isn't enough on its own. You also need a local web server running on your computer. In Paul's video, he's running MAMP (for a Mac). On Windows, you could run XAMPP.

     

    Judging from Paul's video, you still need to use Preview in Browser. However, I suspect that if you set up a testing server in your Dreamweaver site definition, you should also be able to see the fonts in Live view.

     

    If you're not familiar with setting up MAMP/XAMPP and a testing server, see my tutorial at http://www.adobe.com/devnet/dreamweaver/articles/setup_php.html. The tutorial is for testing PHP, but you can also use MAMP/XAMPP to test ordinary .html pages.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 9:51 AM   in reply to DustinWilliam

    For a page to be displayed using localhost, it needs to be in the /Applications/MAMP/htdocs folder or a subfolder thereof. When MAMP is running, /Applications/MAMP/htdocs is the equivalent of http://localhost/. Any subfolder can be viewed as http://localhost/subfolder_name/.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 10:23 AM   in reply to DustinWilliam

    Did you add that as a TESTING server?  It should be added to your original site definition so that you have Local, Remote, and Testing servers defined.

     

    If you want to add it as a completely new site, you would define this htdocs folder as your local root folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 10:44 AM   in reply to DustinWilliam

    Sounds like your original files were created without creating a site in DW.  That's not the right way to go about things.  You must always work from within a defined site in DW.

     

    When you have defined your site, you would have your local site's root folder pointing to the folder on your hard drive that contains all of your website's files. To use localhost as your local root folder then ALL of the website's files must be in the htdocs folder, including fonts, images, html, CSS, etc.  All of your links in your pages must point to these files as they site within the htdocs folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 10:57 AM   in reply to DustinWilliam

    DustinWilliam wrote:

     

    I want to use MAMP to view that font with the Live View feature within Dreamweaver, instead of having to uploading the site to my Network Solutions web hosting.

    I normally work with PHP sites, but I've just done a quick test with a static site. There's good news and bad news.

     

    First the bad news: with HTML pages, Dreamweaver's Live view doesn't use the testing server because there's no need to parse server-side script.

     

    Now the good news: you can view HTML pages in localhost by selecting Dreamweaver's Preview in Browser. You're not seeing the page in Live view, but at least it's a lot faster than having to upload to your remote server all the time.

     

    To set this up for a static website, you need to store all of your files inside the /Applications/MAMP/htdocs folder. You also need to define a testing server in Dreamweaver.

     

    Copy all of your site files from the Desktop to /Applications/MAMP/htdocs/mysite.

     

    Go to Site > Manage Sites and click the Edit icon for your site.

     

    Set Local Site Folder to /Application/MAMP/htdocs/mysite

     

    Select Servers, and click the plus button to create a server.

     

    Set Server Name to Testing

    Connect Using: Local/Network

    Server folder: /Application/MAMP/htdocs/mysite

    Web URL: http://localhost/mysite/

     

    Click the Advanced tab at the top, and set Testing Server Model to PHP MySQL.

     

    Click Save.

     

    Make sure that the Remote checkbox is deselected, and select Testing.

     

    Using Preview in Browser will now display your site at http://localhost/mysite.

     

    Yes, the workflow needs to be improved, but Adobe acquired Typekit late in the development process of CS6. Web fonts that you store locally are much easier to use, and can be viewed in Live view.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 12:23 PM   in reply to DustinWilliam

    Glad you got it sorted. I haven't experimented with Typekit yet. Must get around to doing so one day.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 3:17 AM   in reply to David_Powers

    Hi David,

     

    This a related question I hope. I am an extremely new user to dreamweaver and I am currently going through your tutorial (Creating your first website). Everything has been going hunky dorey and I have to say the tutorial is absolute bliss to follow, however I have hit a snag. I'm on part 3 of the tutorial, styling the header with Edge Web Font. I've added the Edge Wed html content as instructed in the Source Code in DW. Here is what my code looks like -

     

    <!doctype html>

    <html><head>

    <meta charset="UTF-8">

    <title>Check Magazine</title>

    <script src="http://use.edgefonts.net/sarina.js"></script>

    <link href="styles/check_cs6.css" rel="stylesheet" type="text/css">

    </head>

     

    I then added the CSS from Edge Web site and placed in the check_cs6.css after the other styles entered. My css is as follows

     

    h1 {

      font-family: sarina, serif;

      font-size: 96px;

    }

     

    The problem is when I veiw the site in "Preview in browder" the font and size have not changed.....

     

    I have been through the steps repeatedly but I cannot not see anything that I have done wrong. Do you have any insight as to what I am doing wrong?

     

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 11:23 AM   in reply to PodoDrums

    I also don't see the typeface... I hope the html is correct because the size, color, style changes.

     

    It's Dreamweaver 5.5 ... NOT 6 ... is that required?

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script type="text/javascript" src="//use.typekit.net/yct3avh.js"></script>

    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style>

    h1 { 

    font-family: "futura-pt",serif;

    font-style: normal;

    font-weight: 500;

    font-size: 60pt;

    }

    </style>

     

     

    </head>

     

     

    <body>

    <h1>EASTERNdd</h1>

    </body>

    </html>

     

     

    ====================================

    Also, in the instructions above...

     

    Copy all of your site files from the Desktop to /Applications/MAMP/htdocs/mysite.**PLURAL => APPLICATIONS*

     

    Set Local Site Folder to /Application/MAMP/htdocs/mysite  **SINGULAR => APPLICATION*

     

    ... only took an hour to figure that one out...

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 11:30 AM   in reply to Randy Zeitman

    Use Live View or Preview in Browsers other than IE. Design View is not  reliable because it is not a browser.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 11:39 AM   in reply to Nancy O.

    I am previewing in Browser.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 11:45 AM   in reply to Randy Zeitman

    I re-wrote my script from scratch,

     

    following the instructions again and found that I have missed a character in the script at some point.

    Starting from scratch is much easier than trawling through the script trying to find the mistake (in this instance).

     

    I can't remember what character I missed out. You may have missed out a different one. Start again. And double check each time you enter the code, tripple check and you'll soon see where you went wrong.

     

    Andy

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 11:53 AM   in reply to PodoDrums

    Thank you but I can see the page so I got it working... it's the typeface that doesn't show, but it does the style weight and size (using copy and pasted css from a site that works)... are you able to see above why it might not work?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 12:31 PM   in reply to Randy Zeitman

    Typekit fonts are restricted to specified sites. To preview the font locally, you need to run a local web server, such as MAMP (on a Mac) or XAMPP. You also need to specify "localhost" in your Kit Settings on Typekit.

     

    Although Typekit is part of the Creative Cloud offering, Dreamweaver doesn't load the fonts in Live view without a local web server. Annoying, but true.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2013 12:43 PM   in reply to David_Powers

    Yes, MAMP is running and localhost is set.

    (not using LiveView in DW).

     

    Thank you for your quick reply.

     

    here's what I see...

     

    Untitled-2.gif

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2013 10:44 AM   in reply to Randy Zeitman

    Here is the answer... port settings...

     

    http://sawmac.com/mamp/

     

    See #4... you must reset the ports or explicitly state them in the URL. (the defaults are 8888/8889)

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 1:49 PM   in reply to David_Powers

    It's too bad you can't use typekit from your own desktop. Setting up MAMP for every site I work on would be very annoying, and most of my work is on a shared network not the localhost. A lot of quick previews happen from the desktop.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 15, 2013 2:10 PM   in reply to ajparent333

    Despite the phenomenal ... absolutely unchallenged ... collection of Adobe fonts and incredibly modest price of TypeKit I continue to use Google Fonts solely because of the challenges with MAMP.

     

    The MAMP documentation isn't favoriable to the novice and I still don't know if I can simply alias my entire Jobs folder to the MAMP 'work folder' to make Adobe work.

     

    Perhaps 95% of the issues I faced with it are over but given the acceptable rendering of Google fonts (I took a print brochure with some challenging type requirements and accurately turned it into a web brochure) and ease to implement - a single include statement in a css, I have to do with what works and hope somehow a Dreamweaver Cloud license can somehow marry the two.

     

    (Talk about a consolation letter...!)

     

    p.s., Kudos to Adobe support, both online and phone/email - Liz was persistent, professional, and quick.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2013 10:07 PM   in reply to DustinWilliam

    Just adding a little to the correct answer.

     

    Once you have your testing server set up, and the typekit targeting http://localhost, or whatever it is for your testing server. In dreamweaver live view, there is a little drop down menu next to the url and that has some live view options, if you select "use testing server for source"  that will get the typekit fonts to show up within dreamweaver.

     

    I had a bit of a look through the answers and didn't see that bit of advice, so hope it helps.

     
    |
    Mark as:

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