Paragraph Pro fonts changing on different devices

Hello everyone. OK, I have the first version of the new site up and running and have hit a mystifying problem. I used Paragraph Pro for the text sections, changing the font to Geneva throughout. When I look at the new site in Preview, the font is Geneva. I’ve published the site and when I look at it on the desktop, it’s Geneva; but on a tablet or phone, it’s a mixture of Geneva and something else, a serif font, maybe Times or something like that.
I used the Royale theme for the site, and have ‘use master style’ unchecked in the Page Styles menu.
Am intrigued to know why this is happening and how to rectify it. Here is the address
http://nottinghamshireflavours.co.uk
It’s a work in progress, so please don’t judge it too harshly…
Thanks in advance…

Did you get this working yet?

I took a quick look on my iPad, but can’t see where the problem is on the page. I’m pretty “font blind” so I might have missed it.

Post back if you’re still having issues. Might want to post a screenshot of where on the page you see the problem

Thanks Doug. I haven’t done any work on it today (busy with other stuff) but the problem still looks to be there, on my phone at least. Not sure how to post a screenshot from the phone, and all is fine on the desktop; but on the Home page on the phone, the slogan ‘Nottinghamshire’s own…’ is in the right font, but ‘Autumn-Winter has arrived’ and the following paragraph are all in a different one. The paragraphs below the small images are all correct. All were created using Paragraph Pro and all were formatted to use Geneva.
Please let me know if it’s different on your gadgets. Thanks!

It is strange. On my MacBook it looks fine and I can see Geneva with a fallback serif. But on my iPad it looks serif.

Same on my iPhone

Is it the same across different browsers?

The paragraph that says “ Autumn-Winter has arrived’” is actually made up of 3 spans. You are changing the font with a inline css style.

The paragraphs that are okay don’t have those spans in them.

I would think that the “Autumn-Winter has arrived” really should be a heading (h2 or h3) and then the remaining two spans might be better off as two paragraphs.

<p style="text-align:center;">
<span style="font:21px Geneva, serif; color:#FB006E;">Autumn-Winter has arrived!</span>
<span style="font:12px Geneva, serif; ">…</span>
<span style="font:15px Geneva, serif; ">…</span>

I don’t use paragraph-pro so I don’t know much about it. I’m a markdown guy when it comes to text.

At any rate I’m not sure why the “ Geneva” on the inline style didn’t work. I’m on an iPad now so I have limited tools available. I just spotted that as the differences between the two areas.

1 Like

Thanks Doug, this is helpful.
I did originally have ‘Autumn-Winter…’ as a heading, but couldn’t then edit it to the font that I wanted, so used Paragraph Pro instead.
I’m hoping to have a blitz on the problem later today and will let you know whether I have any success.
Harry, that’s a good point. My tablet and phone both use Safari, so I’ll try to take a look at the site on Chrome etc.

Thanks to all for your help. I’ve managed to get rid of the clashing fonts by using a mixture of markdown, headers and Paragraph Pro. It’s not exactly how I want it to look, but it’s acceptable. I’ll tinker with it some more when I have time. Anyway, it’s all good for the learning curve I suppose!
Thanks again for your help; much appreciated.

I can still see the “Times New Roman”-like font on the Autumn-Winter has arrived page. It’s in the section about gift cards.

Unrelated, but on the Advertise with us! page the column that holds the text doesn’t display properly on medium sized iPhones (iPhone 11 tested); the text cuts off at the last two letters on the lines “Cover price is £2.99 per issue” and “Prices are quoted exclusive of VAT”.

Thanks Erwin, obviously I have more work to do on the site than I had thought! I appreciate you letting me know.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.