Typekit Fonts not Displaying In Muse or Browser Previews

[cwwebdesign]

Hello All,

I have been having an ongoing issue for about a week that is absolutely crippling me.

The problem is that the site that I'm working on uses Typekit fonts exclusively. The fonts display fine in the design pane of Muse. However, when I preview the site in Muse or preview the site in a browser, the text displays completely different fonts.

I contacted Adobe support via chat early on and spent literally hours with a rep on a remote connection. Frustratingly it was evident that the rep was not familiar at all with how to use Muse. I had to keep assisting him to navigate the program and make changes. He would do things like lock elements and then not understand why he couldn’t click on them or move them. To make the situation more frustrating, he evidently couldn’t tell the difference between the Typekit fonts that were showing correctly in the design pane, and the random fonts that were showing in the preview. He kept exclaiming, “See it’s fixed!”, and I’d have to explain that it’s exactly the same as before and point out differences between the fonts so that he could see that it was not, in fact, fixed.

This was already after I had to try to explain the issue five times in five different ways until he (I thought) understood the problem. After getting nowhere on the remote session, he called me and I had to explain again what the issue was. He seemed to be able to understand the words that I was saying, but not to understand what I was actually explaining. It felt like I was going around in circles. He would say things like, “Ok, so to confirm, you have a problem not being able to select the font that you want to use?”. No! This is after hours working on the problem and he still wasn't clear on what the problem is. Eventually, he said that he was going to have to work on it and call me back within 48 hours. Fine. I got a call a day or so later and he said that “It’s working now, you should try it.”.

I give up…

I have no issue with outsourced technical support and I don’t have a personal issue with the representative that “assisted” me. I’m sure he’s a very hard-working gentleman that is doing his best with the resources that he has. My issue is with Adobe’s oversight and management of their technical support. I would expect that the representatives would actually know their way around the product that they are supporting. This can only happen if they receive the right training and resources. Furthermore, their grasp of English, since that is the demographic that they are supporting, should be such that they actually understand clearly what the customer is explaining to them. They should also be able to speak clearly enough themselves that I don’t have to ask for them to repeat themselves 3 times. Again, nothing personal…I’ve had excellent experiences with outsourced support from other companies. But when I’m paying such a high price for Adobe’s subscription service and I encounter an issue that puts a stop to my business, I should be able to have a relatively smooth support experience. I’d hate to think how someone not as patient or polite as me might have handled these interactions.

Well, now that my rant is out of the way, back to the issue at hand…

macOS 10.13.5 (High Sierra)

Muse 2018.1.0.266

File Format 386

The font that I’m using primarily is Museo Sans 300 (and 100), but I can reproduce the issue with any Tk font that I’ve tried.

I have tried previewing in Muse, as well as in Chrome, Firefox, and Safari. I have cleared all browser data for these browsers.

I also tried deleting the Tk folders from ~/Library/Preferences/com.adobe.AdobeMuseCC.2018.1/Local Store/ and then restarting Muse and re-adding the web fonts.

Nothing so far has worked.

Here’s what is REALLY weird... I have one bit of text that displays as the correct font in the preview. The only difference about the text that displays correctly is that it has the H1 heading attribute, whereas the others have the paragraph attribute. Obviously, I can't have everything on the page be H1 as that would be a nightmare for SEO.

Have a look at some comparisons. The top line that says "Start Your Adventure" displays the correct font (<h1>). That is the only place where the font is displayed the same between the design pane and the preview. I made another "Start Your Adventure" (<p>) below it (that doesn't display the correct font) so that you could more easily see the difference 1:1. Since the Museo Sans font is pretty standard looking, I also changed the font to Acier BAT Text Gris so that the difference was really evident.

Any ideas would be much appreciated!

Cheers.

[Ussnorway]

at any point did you upload this web page to a real host server and test it there... if so can we have the url please?

[cwwebdesign]

Hello,

You can access the bug testing portion of the site here: Envision Adventure - Home

If you scroll all the way to the bottom, I have a section with three different Tk fonts set up as an example. See the screenshot below.

[Günter Heißenbüttel]

What surprises me: In your initial post, you are describing in a very lengthy way your bad experiences with the Adobe support. This is understandable, but leads to – nowhere, regarding your issue.

It isn’t really effective, when you describe the real issue in a few lines only at the very end of your post.

Please consider, that this forum is international and due to possible language limitations it might be a very good idea, to describe the issue in a simple, clear and straightforward way to avoid misunderstandings.

As far as I understood:

1. You use a TypeKit font (no matter, which one).
2. The font displays correctly within Muse.
3. The font displays correctly in browsers, if it is tagged as „h1“.
4. It doesn’t, if it is tagged as „paragraph“.

Correct?

If yes, why not describing it this simple way? And, above all, why don’t you create a tiny .muse file containing nothing but two text frames (using the same TypeKit font, one as „heading“, one as „paragraph“), upload it to Dropbox, CC Files or a similar file sharing service and post the download link here? Then we can have a look.

I tried to reproduce, what I think is your issue, but all works fine:

And here my sample .muse file.

https://www.dropbox.com/s/c8igp57nf3mbmwe/TK_Test.muse?dl=0

Could you give us yours?

[cwwebdesign]

Sorry for the delayed response as I have been away.

What surprises me: In your initial post, you are describing in a very lengthy way your bad experiences with the Adobe support. This is understandable, but leads to – nowhere, regarding your issue.

The reason I reviewed my experiences with Adobe support is twofold: First, while reviewing previous threads where customers have done the same, it seems that posting the support experience in a public forum often results in a response from Adobe that resolves the reported issue. Second and most importantly, I wanted to make Adobe aware of the experience so that they can use it to hopefully elicit changes in their support system. This is an Adobe support forum, and I posted about my Adobe support experience. This seems entirely reasonable to me.

It isn’t really effective, when you describe the real issue in a few lines only at the very end of your post.

First of all, I reviewed my problem at the very beginning of my post in bold-type before I spoke of my support experience. Second of all, I have a couple paragraphs of information that not only describe my problem but also try to give as much other detail as possible to assist in identifying the issue, such as troubleshooting steps that I've tried, fonts and browsers used, etc.

If yes, why not describing it this simple way?

I thought I did describe it in a simple way. I'm sorry I didn't use the same exact structure you did, but I did my best to lay out the facts.

And, above all, why don’t you create a tiny .muse file containing nothing but two text frames (using the same TypeKit font, one as „heading“, one as „paragraph“)

I used the production file in the post in case it was something with the file itself that was causing this issue. However, you still have a good point, because if the problem didn't occur in the type of file that you described, then it would pretty much confirm that there was an issue with the individual file I'm using for the site. Good idea! So I did try this and, like you, I was also unable to reproduce the issue, so it must be something in this particular file. I have removed all pages but the home page, as well as all breakpoints, so the file should be as straightforward as possible. The file can be accessed here: envision-adventure-font-problem.muse - Google Drive

As you have shared your opinion, I'll respectfully share mine as well. It doesn't come across as very helpful when you criticize my request for assistance. Instead of just asking me to try using a simple file with two text frames, you preceded all of that with an item-by-item critique of my post. Don't get me wrong, I do sincerely appreciate your help, but wearing the ACP badge you represent Adobe, and after having my existing experience, it doesn't feel good to have my post critiqued instead of just working to get to the bottom of the issue.

Thanks and kind regards.

[Günter Heißenbüttel · Accepted solution]

Open the „Page Properties“ of your master page, go to the „Metadata“ tab, delete the „HTML for HEAD“ and all works fine:

By the way: The font Komu B in your menu is used as a system font and will therefore be converted to an image, when exported. (Why? Please read my answer 4 here: https://forums.adobe.com/thread/2357163) Use a standard font instead, or use the TypeKit version of Komu B.

[cwwebdesign]

Thank you!

I forgot that there was that <head> menu in the page properties!

Also, thanks for catching that Komu B was a system font! I will definitely change it to the Tk version.

Much appreciated.