Typeface problems in different browsers

Hello All.

Have just completed a rebuild of my new site http://stevehowlett.com using Foundry, RW8 & Photo by Nick Cates. What a great bit of kit that trio make! I’m very pleased with the result, although more content needs to be added.

My problem is that I am using GoogleFonts (no problem setting that up) and the weight of the title on each page, “Steve Howlett” looks perfect in Safari (weight 300) but on all other browsers it appears far too heavy. The header stack is set to Main label = custom, Tag = H1-Page title. I only have this typeface in 300 so what’s going on?

Any help would be much appreciated.

Hi there @musicalbodger

Glad to hear you’re digging Foundry! Can you do me a favor and send me a ZIP file containing your project file for me to take a look at?

The look the same to me on Safari, Chrome & FireFox.

It looks like you have the H1 font weight set at 300, but it also looks like you applied some additional font settings by selecting the text and using the text settings in the sidebar. The font is set to size “139%” and weight is set to “light”.

You may be having some issues in some browsers not applying the lighter font weight in this way. You may be better off setting the weight of your H1 to “100”. Make sure you are loading that weight from Google too.

Screenshot: Safari (11.1.2), Chrome (69.0.3497.100), FireFox (62.0)

Thanks @DLH
Yep they look the same in your shots, and they are the same, problem is they are all too heavy. This is how it should look.
Safari on iMac

not this
Firefox on iMac

Will try your suggestion later.

Thanks Adam @elixirgraphics, will send a ZIP file shortly.

My guess is there is some styled text being used.

Certainly not on the header. Did have a problem with that elsewhere but sussed what was happening and fixed it. Thanks for the suggestion.

Looking at the code there is a lot of setting the font to be Roboto 400 or Monserat 300 and then those settings being over ridden. I expect Adam will instantly see it in the project file once he gets the chance.

@webdeersign Thanks Gary. I’m new to RW and have just about got the hang of it now. I did spot those ‘over rides’ last night and have sorted them but not uploaded to the server yet. Again, I’m not sure that’s what the problem is because I was just over riding with the same setting i.e. Montserrat 300.

So it looks like you’re attempting to use the built-in Stacks font controls (Screen Shot 2018-09-18 at 9.53.13 AM.png • Droplr). This is a no-no in this case. You need to be using the controls provided by Foundry only. The font you show here is lighter than 300.

You should be using something like this in your Page Header settings:


Note that you’ll need to load the 100 weight in the Typeface stack, too.

1 Like

Thanks Adam @elixirgraphics.
In your first screenshot

(Screen Shot 2018-09-18 at 9.53.13 AM.png • Droplr)

I see what you’re saying but where do I find that Plain Text panel? I can’t find it, sorry. As I said earlier, I’m new to RW.

I think you’re saying that this is 100

and this is 300

If so, why the different rendering in Safari and all other browsers?

Thanks so much for your time and help over this.

Click in the text field for the Page Header as if you’re editing the contents of the stack. The controls will pop up in the settings palette.

After making the changes I suggested they should not.

1 Like

That’s cracked it, Adam.:grinning:

Didn’t need to use Override Font at all, so unchecked that. Montserrat is only used for my name. Set the Google Font in Typeface to just download 100 and, all is sorted. Looks the same on every browser.

Thanks again for your help. Much appreciated.