Help, my website is not the same as in Xara

[Bassman]

Hello,

I have been using Xara for quite a few years and it seems my version is becoming less and less WYSIWIG when it comes to fonts. I am using Designer Pro X 17 and quite often, what ends up on my website is different from what I see in the Xara preview. This is mainly happening on my Android phone. Is this common these days and is there something I can do toy fix it?

I am using web safe fonts. Here is an example - http://www.metroplexmultimedia.com/pricing.htm

This page was updated today (4-29-2021) and it looks correct on the PC but on my Android phone using Chrome the fonts are not correct.

Thanks for your input!

[wizard509]

I don't know anything about web design, but your site looks fine to me.

[gwpriester]

Are you referring to the oversize black text on your browser variant? I'm looking at your link in Firefox on a 24" monitor and the black text looks like it is twice as large as the white text.

I looked at the page on my iPhone in Safari and Edge and it looks fine. BUT the menu text is way too small and not enough spacing. I managed to hit Pricing but it was pure luck. I would make your text twice as big

[Acorn]

I have to advise that Font families can be different across devices and you may end up with a similar but not exact presentation as a different font is substituted.
Also renderings of the smallest font size can result in a glyph not shrinking as expected.

You have used Montserrat, Bitter, Alegreya Sans (500 & 700 weights), Open Sans, Cabin (500 & 700 weights), Arial (default), Trebuchet MS, FontAwesome.
Some are embedded with your site; others are at the whim of the browser. Only Arial and Trebuchet MS are "web safe".

With v17, you are seeing what Internet Explorer renders. Not ideal.
If you are expecting consistency, you need to test all major, modern browser across as many devices as possible.

Acorn

[Bassman]

Thanks for your help. Glad to see the pricing page looks fine on the Apple phone with Safari & Edge. I have uploaded a screen from my Android phone to show the text. It is all in the paragraph text area which is Trebuchet. I am sorry I was not specific enough about fonts and the entire site as I was focusing on only the Pricing page. But it is the web safe fonts that are not displaying properly. And yes, I need to address the cell variant menu but that also is not showing as it does in the Xara program. Thanks.

[Initiostar]

Viewed the page with Chrome on Android and it looks OK. Try clearing the browser history on your phone.

[Bassman]

Thank you very much. That did it. I don't quite understand why because the previous iteration was largely the same. But I will know for the future.

Regarding the cell variant drop down menu, I have increased the font size to 24pt and it still looks the same. I tried clearing the browser history as well. Any ideas? It seems constrained to the small area.

[Egg Bramhill]

Hi Bassman, when i first looked at your site on my desktop it looked almost the same as your mobile screen grab. i.e. the pricing text was overly large and the image of the femaile was overlaying the text. This was in firefox. I then copied the url & pasted it into Chrome then Edge and had the same result. However I hit Ctrl+F5 and the whole site changed. Ditto Ctrl+f5 in Chrome & Firefox. All the text was now white & the females image didn't overlay the text.

I just assumed you'd recently updated you site. Strange.

[Initiostar]

Regarding the cell variant drop down menu, I have increased the font size to 24pt and it still looks the same. I tried clearing the browser history as well. Any ideas? It seems constrained to the small area.

Before and after screenshots with Android Chrome:



Sometimes when you make a few quick changes it takes time for the cache to catch up; I had to refresh the browser to see the larger menu. You could make the menu larger still and have some space between the headings:

e.g.

[Bassman]

Thanks very much for your help. These are changes I made today. My phone still shows the very small text. Frustrating when you are designing and want to see a representation. I will keep the 24 pt but add about 10 pts of vertical spacing and see if that helps. I appreciate the screenshots!