Problem with publishing webfont (PT Sans)

[han1234]

Hello everyone,

I hope somebody can help me.

I designed a (responsive) website, and I used only PT Sans.

In design-mode it looks good, but when I publish it, the look of the font changes.

In Safari only the words in the menu-bar look good, but the rest of the text changes: fatter? and  different spacing. in Firefox (mac) all of the text changes.

Did I miss something? Any help is welcome!

Thanks for reading,

Han

profielfotografie.businesscatalyst.com/index.html

[Günter Heißenbüttel]

Works fine her in Safari and Chrome:

[han1234]

Hello Günter,

Thanks for replying!

The site works fine, but look at the difference of the fonts:

screendump of the page in muse:

[Günter Heißenbüttel]

It is not THAT helpful, to post a screenshot of the Muse canvas. Would be better, if you post a screenshot of browser view.

But even it I compare your and mine screenshot – where is the difference?

Perhaps you are seeing different font weights. Unfortunately you won’t be able to fix this. Every browser has its own text engine and therefore renders fonts different from each other. We are talking about the web, not about print design.

Here the font rendering on Muse, Safari and Chrome:

[han1234]

I understand what you mean, but look at this comparison:

The old website (non-responsive) did not have that problem,

Profielfoto laten maken in Amsterdam | Profielfotografie.nl

The new(responsive) site renders different:

Profielfoto laten maken in Amsterdam | Profielfotografie.nl 

So, it is not a browser issue I think.

But yes, browsers react different:

When I open the new(responsive) site in Safari, the fonts in the menu-bar look good! (not in Firefox)!

[han1234]

In this post I simplify the problem:

The next two websites use PT-Sans, but the fonts look different!

1 - This is the former (non-responsive) site, in which the font look the way I wanted: http://profielfotografie1.businesscatalyst.com

2 - I rebuilt the site to make it responsive, and now the font doesn’t look good anymore: http://profielfotografie.businesscatalyst.com

I have no idea why they differ when exported to html. In muse, in the design-mode, they look the same!

[Guest]

I see the differences in the spacing in your navigation tab...have you checked the padding in each active state?  There is a bug with the left right padding carrying over from master pages to your webpages. You will need to use margin instead for now in the paragraph settings. If this is causing the spacing issue. As far as the PT Sans, fonts can look different in different browsers as well as the settings that are used in a specific persons browser.

[han1234]

Hello HMAM,

Thanks for helping me!

I think the padding is now the same in the navigation tab (0,0) in each state. I corrected one thing: in the active state the little blue triangle was not positioned in the center. But that did not help much.

You write "You will need to use margin instead for now in the paragraph settings."  I have no idea what that means. 😞

And yes, fonts look different in different browsers, but the two websites are both made in PT Sans and when you open them in the same browser they look completely different.......

[Guest]

Sorry I dont have an answer on the Font for you. Hopefully someone will have already run into this issue. GH’s screen shots don’t show a difference but I’ll take your word for it.

on the padding issue, I’ve been playing around saving and resaving  a very simple text box on a page and the padding is respected. Its intermittently occurring which is why it may have been missed.

Here is a screen shot of two text boxes created on the master page with 40 pixels of padding applied to it.

when the home page index is previewed in browser it works. Moment before the left and right padding were not...

Looks like the text boxes also dont always change size in exact proportions but you can see the padding is working.

[Guest]

Could you share the simplified version of the muse file here. someone will be able to tell (possibly) what is going on.

[han1234]

Yes, I will prepare a file!

[Guest]

Sorry I think I may have posted to the wrong post yup I did! Old age Han....

. but Go ahead I want to see if I’m getting the same results.

[han1234]

HMAM, can you send a mail to info@profielfotografie.nl, then I'll send you the muse-files.