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
• • • • • • • • •
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
...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.
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!
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!
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/.
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.
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.
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
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.
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?
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.
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
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.
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?
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...
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.
Copy link to clipboard
Copied
I am previewing in Browser.
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
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?
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.
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...
Copy link to clipboard
Copied
Here is the answer... port settings...
See #4... you must reset the ports or explicitly state them in the URL. (the defaults are 8888/8889)
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.
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.
Copy link to clipboard
Copied
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.