Highlighted

Problem with publishing webfont (PT Sans)

Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

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

Views

468

Likes

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

Problem with publishing webfont (PT Sans)

Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

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

Views

469

Likes

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
Oct 19, 2017 0
LEGEND ,
Oct 19, 2017

Copy link to clipboard

Copied

Works fine her in Safari and Chrome:

Screen.jpg

Likes

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
Reply
Loading...
Oct 19, 2017 0
Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

Hello Günter,

Thanks for replying!

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

screendump of the page in muse:

Schermafdruk 2017-10-19 16.48.44.png

Likes

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
Reply
Loading...
Oct 19, 2017 0
LEGEND ,
Oct 19, 2017

Copy link to clipboard

Copied

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:

screen.jpg

Likes

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
Reply
Loading...
Oct 19, 2017 1
Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

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)!

Likes

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
Reply
Loading...
Oct 19, 2017 0
Explorer ,
Oct 24, 2017

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...
Oct 24, 2017 0
Enthusiast ,
Oct 24, 2017

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Oct 24, 2017 0
Explorer ,
Oct 24, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 24, 2017 0
Enthusiast ,
Oct 24, 2017

Copy link to clipboard

Copied

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.

28E585CB-A70C-45FD-A9A9-594EA4FD40F1.jpeg

Likes

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
Reply
Loading...
Oct 24, 2017 1
Enthusiast ,
Oct 24, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 24, 2017 0
Explorer ,
Oct 24, 2017

Copy link to clipboard

Copied

Yes, I will prepare a file!

Likes

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
Reply
Loading...
Oct 24, 2017 0
Enthusiast ,
Oct 24, 2017

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Oct 24, 2017 0
han1234 LATEST
Explorer ,
Oct 24, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 24, 2017 0