fonts displaying as a total different font with uneven spacing on browser

[yellowbird]

I have the Ubuntu and verdana fonts installed with all variants. When I published the site with Designer Prox +, everything looked fine. Now recently, it is displaying as total different fonts with uneven spacing between some letters. Displays the same way in edge, chrome, firefox, and my android phone. On more than one page. Fine in xara preview. Any suggestions? https://www.cbsi-online.com/kyocera_printers.htm (bottom section)

Nancy

[gwpriester]

Ack!

Does this happen if you republish?

[Acorn]

Nancy, I don't think you have fully published the site.
The xr_fonts.css file is Last Modified 27 September 2023, way behind the offending page.
You have a shedload of fonts:


'Abril Fatface';
'Abril Fatface1';
'AcmeFont';
'Anton';
'Arial Narrow1';
'Arial Narrow3';
'Bahnschrift SemiBold Condensed';
'Bahnschrift SemiBold Condensed1';
'Barlow Condensed Medium';
'Britannic Bold';
'Calibri';
'Chonburi';
'Dayton';
'Elephant';
'Elephant1';
'Elsie Swash Caps Black';
'Fjalla One';
'Fjalla One1';
'Georgia';
'Lobster';
'MS Reference Sans Serif';
'Merriweather Black';
'Merriweather';
'Minion Pro';
'Oswald SemiBold';
'Oswald';
'PDF-GTEestiProText-Bold';
'PhrasticMedium';
'Questrial';
'Raleway Black';
'Roboto Medium';
'Roboto';
'Rubik';
'Tahoma';
'Text Me One';
'Trebuchet MS';
'Ubuntu Medium';
'Ubuntu2';
'Univers Condensed';
'Verdana1';
'Verdana3';
'xr11_Tahoma1';
'xr18_Verdana_xr';
'xr22_Calibri1';
'xr24_Rubik1';
'xr27_Ubuntu';
'xr28_Ubuntu1';
'xr32_Calibri2';
'xr46_Verdana2';
'xr4_Arial Narrow';
'xr53_Merriweather1'

I believe those with an XR prefix would be PDFs imported into the site at some point and have partial characters depending on what was typed.

I would try and replace the xr versions with the fuller sets as a start.
I would try and reduce the range of fonts used.
I would published everything to a sub-folder and check how it renders. If good, you need to purge the existing server files and republish.
You've 29 pages, all with a Variant, so that is going to be quite a slog.

If it all appears right in Preview and Export Website then the problem has to lie at the server end.

Acorn

[yellowbird]

I had try to republish, but only changed files was checked. Republished unchecking that and now it displays correctly. I do take info from pdfs, mostly brochures. I do normally change the fonts and font sizes. How can I tell from the font bar if it using the xr version? I tend to use quite a few different fonts instead of being consistent. I have read that too many fonts can cause slow loading. How many different fonts in a page is too many, or does it go by the entire site? Thanks.

Nancy

[Acorn]

I had try to republish, but only changed files was checked. Republished unchecking that and now it displays correctly. I do take info from pdfs, mostly brochures. I do normally change the fonts and font sizes. How can I tell from the font bar if it using the xr version? I tend to use quite a few different fonts instead of being consistent. I have read that too many fonts can cause slow loading. How many different fonts in a page is too many, or does it go by the entire site? Thanks.

Nancy

Nancy, glad you've got it back.

All I've seen on PDF Font Imports is: https://helpandsupport.xara.com/xara...and-fonts.html
I don't know if this generates the font ClassNames' prefix xr_ as well. The font bar ought to show up with a PDF prefix.

The xr_fonts.css lists all fonts in the site. It download is fairly quick so that is no a concern.
Each font on a page, however, takes it toll, roughly half a second each. Your Kyocera page has 10 fonts.
I would aim for under half that.

Once loaded, a font is remembered across the site, so if you focus on a core set and only introduce a couple new ones per page then your speed will lift.

You seem to be using a Plus version as the Xara render version is the same as my Xara Pro+.
When publishing, I would enable the WebP setting (Web Properties > Website > Include WebP images to speed up the site loading.

Acorn

[yellowbird]

Thanks Acorn. I do see the info shown in the link when I use text from PDF and always try to change them - (originally I didn't and had a lot of display issues.) Should I use webp graphics as much as possible instead of jpg as well? ie: when I alter/combine/create graphics especially for stretching full width, export them to a single graphic, then use them on the website? By changing the web properties to include WebP images, and letting xara decide best format at time of publish will it automatically use the webp format when publishing, or do I have to set it on individual images like I do for png for images with transparency? Thanks for your help.

Nancy

[Acorn]

Thanks Acorn. I do see the info shown in the link when I use text from PDF and always try to change them - (originally I didn't and had a lot of display issues.) Should I use webp graphics as much as possible instead of jpg as well? ie: when I alter/combine/create graphics especially for stretching full width, export them to a single graphic, then use them on the website? By changing the web properties to include WebP images, and letting xara decide best format at time of publish will it automatically use the webp format when publishing, or do I have to set it on individual images like I do for png for images with transparency? Thanks for your help.

Nancy

Nancy, you still set the images to have transparency (.png), the WebP selection changes both jpg & png and it the png has transparency, its png does too.

I said "when publishing" as WebP generation is fairly slow and really show in any Previewing you do.
Enable WebP for final run-throughs and publishing.
Your uploaded assets will still have jpg and png versions of the WebP files for those browsers that do not yet handle WebP; Xara's code ensures only the one or the other is downloaded to the viewers' browser.

Acorn

[yellowbird]

Thanks Acorn. I looked in the help and saw the info: Include WebP Images
"When this option is turned on, Xara will export a copy of all your images as WebP and will be used by default when displaying your website.
A copy of your images will still be exported as JPG or PNG to use as a fall-back for browsers that do not support WebP images." Of course after asking. Sorry about that.

Nancy

[bwood]

I had try to republish, but only changed files was checked. Republished unchecking that and now it displays correctly. I do take info from pdfs, mostly brochures. I do normally change the fonts and font sizes. How can I tell from the font bar if it using the xr version? I tend to use quite a few different fonts instead of being consistent. I have read that too many fonts can cause slow loading. How many different fonts in a page is too many, or does it go by the entire site? Thanks.

Nancy

Nancy for websites I try to use two fonts per site.
I’m using a lot of raleway lately, and Noto Sans for headers.
If I’m going with print, I usually limit it to three fonts.