Chinese fonts / Noto Sans S Chinese Regular

[blueznl]

First of all, I'm new to this forum, and somewhat new to Xara / Webdesigning. I'm NOT a pro, that's for sure, but I can cook up some graphics and whip up some pages, and in general ain't [I]too[I] stupid The cause for all this Xara / web stuff was the request of my better half to build a website for her business.

Here's the issue:

I am buidling a multi lingual website (http://www.zhenmei.nl) in Dutch and Chinese. For the regular text I am using Google's OpenSans, which works fine.

For the chinese text I am using NotoSans S Chinese Regular. However I have been unable to find a TTF version of it, only an OTF version.

When I watch the pages in Xara, all chinese text is using the same font (NotoSans S). However when I upload the site and then watch it in my browser, some of the characters are replaced with a different chinese font. The characters have the same meaning, but they appear to come from a different font family. On the 'contact' page (http://www.zhenmei.nl/contact_nl.htm) the two middle characters of the vertical text are 'thinner'.

I'm a little confused here. I know Windows does font substitution, so perhaps the font NotoSans S doesn't contain those characters and Windows replaces them, but then why does it look right inside Xara?

I also know Xara should be able to upload / include those fonts, but if it does, why doesn't it upload these characters as well, or does it do so only with TTF fonts? (If so, anyone who can point me out to a TTF version of that same font?)

I'm mightily confused now...

[gwpriester]

Welcome to TalkGraphics blueznl

New users are not permitted links and your first post was moderated. As your links relate to your question and as your website is created with a Xara product, I have approved the post and the links.

Not sure about the font questions but my understanding is any language that requires text that reads right to left is not supported and would require a tremendous about of coding.

Maybe Mike W or Acorn or Gare will have a better answer.

[blueznl]

In effect Chinese isn't read left to right :-) It's read in whatever direction is convenient to the user! (Not kidding, left to right, right to left, and top to bottom may all occur! Not that I speak a word of chinese, but my wife does :-))

The problem is not in the language itself, but in how fonts are selected / included.

Welcome to TalkGraphics blueznl
Not sure about the font questions but my understanding is any language that requires text that reads right to left is not supported and would require a tremendous about of coding.

Maybe Mike W or Acorn or Gare will have a better answer.

[zaphodeist]

I think I'm right in saying that if you group the Chinese text with itself - select>ctrl+g - it should show correctly

[blueznl]

'It's illegal to group a single object'. That didn't work Either that, or I didn't understand what you intended to say.

Anyway, after lots of fooling around I'm getting a little closer to the cause... It looks like it is a weird combination of factors.

1. Site / fonts look ok in Chrome and IE, BUT those are NOT using the specified Note Sans S font but substitute with (probably) SimHei.

2. Site loads in Firefox, but firefox doesn't show all text in Note Sans S, just part of the text.

3. All three browsers do show Open Sans for regular (dutch) text without problems.

4. Note Sans S is an OTF font, Open Sans a TTF font.

I'm not sure if it is supposed to be a 'webfont' but it is a 'public' font. I've found it here: http://www.google.com/get/noto/

All in all, it looks like IE and Chrome don't like OTF's, and FireFox only has limited support. I'm not an expert on file formats so I don't know if Xara is to blame here by not including the OTF font.

I'm beginning to suspect Xara cannot handle OTF fonts in web exports... That's sad. SimHei is ugly but I probably do not have a choice.

[zaphodeist]

Text group works here

[blueznl]

You're probably binding text to a graphic which causes Xara to export it as a graphic if I understood correctly. But I've got some more text incoming and didn't want turn everything into JPG / PNG images.

Still... this leaves me with another problem: now SimHei seems to be included as an uploaded font, even when I don't want it to be included... Sigh.

[zaphodeist]

No, just selecting the text area with the selection tool and ctrl+g - text still editable

[blueznl]

Well, I can't turn ALL chinese text into graphics, but I almost might have to. There's something very wrong with Xara's webfonts., or just webfonts in general... I thought I had a solution using DroidSansFallback, but it isn't even used... (To clarify: it is uploaded, but isn't used when showing the website in a browser... very annoying.)

[blueznl]

I'm a bit worried that the only conclusion can be: don't use webfonts... I've attached an image that shows the results of different webfonts on different platforms. The results are somewhat... interesting. It looks like none of the platforms seems to download the DroidSansFallback font, so what is shown is what was included in the 'font family'.

It doesn't look like I am able to specify the font family in Xara (that would be a nice extension, allowing users to define a 'font family' which is then shown as a 'family' option in the font selector, thus giving more control over the output and the font shown)... And if there was no family specified in the generated CSS code, it's all up to the browser to find the appropriate font.

Which, in turn, is surprising.

Firefox on Windows 7 cannot handle OTF fonts, nog even when they are locally installed. Its onboard matching mechanism mixes up fonts of different families. Just for fun I tried it on Windows XP where it doesn't even match some fonts.

Google Chrome also surprised me by not recognizing Noto Sans CJK and especially Droid Sans Fallback (a Google font IIRC).

IE on Windows was ok (fonts were not the proper ones but readable) as did Firefox on Linux (it got Noto Sans S and CJK wrong but the rest seemed ok).

What's causing this? Is the inclusion of webfonts a bit broken, did I select the wrong font (which shouldn't matter, but still)? In the core the problem seems to be non-loading webfonts...