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-typeki t/.
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.
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!
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!
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.
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.
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?)
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.
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?
1 person found this helpful
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.
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.
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!
Glad you got it sorted. I haven't experimented with Typekit yet. Must get around to doing so one day.
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 -
<link href="styles/check_cs6.css" rel="stylesheet" type="text/css">
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
font-family: sarina, serif;
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?
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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
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...
Use Live View or Preview in Browsers other than IE. Design View is not reliable because it is not a browser.
I am previewing in Browser.
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.
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?
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.
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.
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.
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.