• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

Community Beginner ,
Sep 01, 2012 Sep 01, 2012

Copy link to clipboard

Copied

• • • • • • • • •

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

• • • • • • • • •

Views

16.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 02, 2012 Sep 02, 2012

The answer is in this Adobe TV video by Paul Trani: http://tv.adobe.com/watch/creating-for-mobile-and-tablets/adding-custom-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 th

...

Votes

Translate

Translate
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

The answer is in this Adobe TV video by Paul Trani: http://tv.adobe.com/watch/creating-for-mobile-and-tablets/adding-custom-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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

David,

Thank you very much for the quick reply and answer. This information is very helpful to me. I have been using the put feature of Dreamweaver to quickly upload changes to my site on my web server - its been working, but is tedious having to upload to view results.

I will look into MAMP and make use of a local web server. That would help speed up the building process for me for sure.

Thanks again, very much appreciated!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

Actually, following these steps, I am running into an issue. In your tutorial, you created a new PHP site. I already have an HTML5 page created.... how can I get it to work with testing on the localhost?  Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

I can't get this to work. I've placed my files in the htdocs folder, and then tried the php_test folder, and also added that site in Dreamweaver - it wont live view from the localhost - This is really complicated JUST to view a font instantly - Adobe really needs to rethink this.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

I'm really really confused.

Here is my entire scenario. ....and thank you for your patience with me!

I have a few webpages made in Dreamweaver, and those site files are on my desktop. Those pages use a TypeKit font which I can only see rendered when I upload my site to my Network Solutions web hosting and view it on the web. 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.

In the htdocs folder of MAMP, do I copy my site files I have saved on my desktop to that folder, or do I add them all to the sub-folder 'php_test' you mentioned to create in your tutorial? When I follow the steps to define a new site in Dreamweaver, and make sure it is selected as TESTING, the Live View url points to file:// and not http://localhost/

Maybe i'm missing something in these steps? Again, thanks for your patience! I'm new to desiging with webdonts. It seems like it would be easier to not use TypeKit and have webfont files actually downloaded (Would that allow me to design with those webfonts and view them instantly?)

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

Hi Murray, thanks for the reply.

The site I have defined in dreamweaver is setup like that of the tutorial, as testing, point to the files in the htdocs folder of MAMP - this still does not work in live view. It keeps pointing to file not http. I am stumped. I need step by step info, as there are far too many variables to get confused with.

Would this solve my root issues: Would downloading webfont files allow me to design with the actual rendered font within Dreamweaver?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

David,

This solved my problem! Your solution works, and will help me view my fonts quickly. Thanks so much for all of your explanation, patience and know-how! I really appreciate your time!

Dustin

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2012 Sep 02, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 05, 2012 Dec 05, 2012

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

I am previewing in Browser.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2013 Feb 14, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 17, 2013 Feb 17, 2013

Copy link to clipboard

Copied

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)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 15, 2013 Mar 15, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 15, 2013 Mar 15, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 28, 2013 Jun 28, 2013

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines