How do I choose Japanese Fonts?

I Need Help
1

In SoftPress Freeway, the Edit menu contains a command called “Font Sets” that allows me to create a new font set with any fonts I like. For example, I created a font set named “Gothic” so I can apply that to my Japanese text and have it display properly as a Gothic style Japanese font in the browser. Specifically, I setup a Screen Font as “Hiragino Kaku Gothic Pro” (a standard MacOS Japanese font, since I use a Mac), and I then setup the following as “Alternative Fonts” that will be chosen in the browser, based on the type of device the user has:

‘Hiragino Kaku Gothic Pro’,‘平成角ゴシック’,HeiseiKakuGothic,Osaka,‘メイリオ’,‘Meiryo’,‘ＭＳ Ｐゴシック’,‘MS PGothic’,Sans-serif

If a visitor to my Japanese website (built in Freeway) is using a Mac, then they would see all the Japanese text in Hiragino Kaku Gothic Pro, since that font is on their MacOS X computer. A Windows user who visits my site would see the text in Meiryo since Meiryo is a standard Windows font. I added MS PGothic as a fallback for people who have really old Windows machines which don’t have Meiryo. And the absolute worst case fallback is Sans-Serif. If I did not setup my font set this way, the font people would see in their browser would vary wildly, which I consider highly undesirable.

The problem in Blocs is that I want to achieve the same thing I can accomplish in Freeway. I can type Japanese text in Blocs just fine, but I don’t see a way to setup Japanese fonts in Blocs as I do in Freeway. This is critically important because you typically won’t find Japanese WEB FONTS due to the fact they would be too big to download, unlike English fonts. (English has 26 letters but Japanese has a few thousand characters.)

Blocs is setup to offer various Google web fonts for English, which is fine when using English but not when using Japanese (or Chinese, for people who need that). And Helvetica is the lone “local” font (not a web font) that is offered. There are no Japanese local font choices offered in Blocs at all.

When I type Japanese in Blocs, it displays as a Gothic font, which is nice, and when I preview in Safari, it also displays in Gothic, which is nice. But there are times I want certain text to display as a Mincho font, not Gothic. (Think of Gothic as a font shape similar to Helvetica, whereas Mincho is a font shaped like Times.)

All said, how do I conveniently get control over Japanese fonts in Blocs?

Thanks.

2

My opening post centers on Japanese fonts, but the main thrust of what I seek applies to English fonts too. For truly, does every Blocs user really use Google web fonts exclusively, with no local fonts other than Helvetica? Seems strange to me if true. So when I speak about “Font Sets” in my opening post, I am not just asking about Japanese. Let’s say I want to add Times as a local font, which is a standard font on Windows and Mac. Who doesn’t have Times, right? So I would want to create a Font Set of sorts in Blocs based on the Times font, but I would also want to setup fallback in the rare event that someone out there lacks that otherwise ubiquitous font. So in my SoftPress Freeway documents, I have a “Times” Font Set that includes Times and also Times New Roman and then “serif.” Having fallback is the right thing to do when using local fonts, an it would seem like a good idea to use at least some local fonts to avoid the situation if your web visitors having to download web fonts before they can see any text in your site.

I look forward to hearing your thoughts on this. Thanks.

3

Twenty-one views of this thread but the only person submitting replies is myself. It would appear that Blocs users have little to no concern about fonts. Fascinating.

4

First of all did you read this (Font Manager – Blocs – User Documents) from the knowledge base? It covers installing local web font files.

It’s also worth noting Blocs supports the extended google font type faces for various languages, this is configured via google fonts sites.

As for system fonts, Blocs only offers Helvetica right now. This is an area I’m yet to build out in the app but I will do at some point in the future.

It’s worth noting you could add an additional style sheet to a Blocs project that would set this, granted it’s not done visually once you have your font rule it could be added to multiple projects / pages via the project attachments.

1 Like
5

Norm,

The knowledge base link you mentioned is speaking about WEB FONTS, but like I said, Japanese fonts are large in terms of file size . An English font that might be 50k would be about 3MB in Japanese due to all the glyphs in Japanese. English has 26 characters. Japanese has almost 3,000, hence the large font file sizes.

Google is working on Japanese web fonts, but because of the file size challenges they face, their efforts have remained in the “experimental” stage for a very long time now:

That is why linking local system fonts is really the only answer when trying to get Japanese fonts to display correctly on the web right now. But thank you for mentioning that the adding of STYLE SHEETS would be the solution.

1 Like
6

Ah I see I was not aware of the sheer scale of the Japanese type faces, ignorance on my behalf.

Ok so right now you would have the option of a typeface set via an additional css rule. I’m not that familiar with system fonts and their availability across various OS’s and OS versions. Do you know of a reference to this?

7

Norm,

The list of system fonts I listed in my opening post is what I have used for many years with great success:

‘Hiragino Kaku Gothic Pro’,‘平成角ゴシック’,HeiseiKakuGothic,Osaka,‘メイリオ’,‘Meiryo’,‘ＭＳ Ｐゴシック’,‘MS PGothic’,Sans-serif

That font listing covers MacOS 9 through X and most old and new versions of Windows. I wrote the major font names in English and Japanese to ensure the font is properly chosen. These are called GOTHIC fonts, which in terms of the font shape roughly corresponds to Helvetica and similar looking English fonts.

I also have another font listing, with the same OS compatibility, for what’s called MINCHO fonts, which correspond to English fonts shaped like Times:

Hiragino Mincho Pro,‘ヒラギノ明朝 Pro W3’,‘HiraMinPro-W3’,‘メイリオ’,‘Meiryo’,‘MS PMincho’,serif

8

Check some Japanese fonts here https://fontsly.com/. Use the search. I think you can find what you need.

9

You need to scroll up and read my previous posts. I explain in detail why Japanese web fonts are impractical and therefore not used (unless the fonts are limited to Hiragana-only or Katakana-only) and why we instead need to link to system fonts.

10

Hello @JDW hope you’r fine,

Well I’m trying to understand what you need and I was looking for some information and find out that to force the browsers to use local fonts, compatible to Japanese you have to add the following code:

font-family: 'Montserrat', 'Mplus 1p', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic', 'ＭＳ ゴシック' , 'MS Gothic', sans-serif;

Please check the article where I get this information: LINK, hope I help you in the right path.
And this is the LINK with a table with all pre installed fonts in all devices.

11

Thank you for the information. But I would advice that people linking to local Japanese fonts first check how those fonts look on your webpage. YuGothic in particular looks quite bad to my eyes, whereas Meiryo looks good most of the time. Also note that Hiragino is a Mac-only font, while YuGothic and Meiryo are Windows-only fonts.

I had not heard of Montserrat until you mentioned it. It seems to contain Japanese Katakana, Hiragana and Kanji. Each font is about 200k. So if you want Black and Bold and Thin on a single web page, most people won’t have that font on their computer and when used as a Web Font it would mean 3 downloads totally 600k.

Of course, when mentioning Montserrat in “font-family” it assumes the font exists on the computer and if it doesn’t other fonts listed within “font-family” are used as a fall-back. What this means is, since most people won’t have Montserrat on their computer, Montserrat probably won’t be used when displaying your website to 90% of the visitors. What will be displayed is the fall-back font instead.

12

hi JDW,
I understand how you feel.

after Expoet
overwrite style.css just one line.

ffly
ffly1469×313 32.2 KB

If you use !inportant, fonts specified in the heading will change, so I think this is better.

13

I’m afraid I don’t understand your recommendation about using “!important” in light of your screenshot which does not use “!important”. Can you please explain what you mean in more detail?

Thank you.

1 Like
14

Excellent post JD. Living here in Japan and with a Japanese audience I also have the same problem. I have just settled with the default blocs fonts because I thought that there was no alternative. But it sure would be nice to have some good all-round Japanese Win/Mac fonts to be able to use that didn’t take us so much space.

2 Likes
15

Exactly what I am doing. With Japanese text selected, my right sidebar looks like this:

image

It’s a bit disconcerting to see that with Japanese text selected, but when checking my sites in various MODERN browsers and on smartphones, the text seems to display OK.

1 Like