Google Fonts: Local Font Files for Chinese Language)

[alexlii (Alex)]

Hi @Daniel,

Usually, the size of english fonts files are around 100k, and it will not be a problem to add it locally.

For Chinese fonts file, one subset and a specific font weight might be around 40 MB, yes, MB…

For example, please try to download this fonts:

Google Fonts

The size of font seems too big, do you still suggest the above please? or any alternative way please?

Thanks so much.

[Daniel]

I don’t really have a good solution for you here, but in the case where you want to use a special font for Chinese characters, keep in mind that people who visit your site will already have those characters in the form of their system font. So while the font downloads in the background, the characters will appear, but you need to make sure you’re doing a couple things. If you do use the Google fonts api, make sure you have ‘display=swap’ in the request. This will ensure that the font is swapped when ready, and isn’t blank while fonts are downloading:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">

Of course, googleapis.com is (sometimes?) blocked in China, but this answer seems to state that fonts work:

google font make page load very slow in china

There’s also a trick you can use, where you can only download certain characters from a font: https://stackoverflow.com/q/18641479. If anyone visiting your site has ever seen a website that uses that font (the odds are pretty high) then they will have that font already in their browser cache, so no download will be necessary.

Another trick: If you are 'bold’ing only a single character and don’t want to download every single character for that ‘weight’, here’s what you would do. Let’s say you wanted to get

黃

In the Noto font, but only that character. You would first encode it as %E9%BB%83 using this and then your font url would be:

https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap&text=%E9%BB%83 which is only 1.2kb!

Worth a read as well:

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web...

[alexlii (Alex)]

@Daniel

googleapis.com is (sometimes?) blocked in China

yes, but not sometimes, but always at least for now.

@Daniel

but this answer seems to state that fonts work:

Yes, only google font Apis is working for China, but the speed is not stable, that is why we need VPN access.

@Daniel

There’s also a trick you can use, where you can only download certain characters from a font: webfonts - Use a google font and include only [A-Z] and '&' - Stack Overflow. If anyone visiting your site has ever seen a website that uses that font (the odds are pretty high) then they will have that font already in their browser cache, so no download will be necessary.

Chinese font is completely different with English font, and that is why the chinese font is always so big, so, that way of stackoverflow is not practical for Chinese fonts.

@Daniel

Worth a read as well:

En... thanks so much.

Actually, I only use the Noto+Sans+SC, the total size is around 400MB, I can upload it to our server, do you think it is possible to reference that font from our local server?

I mean, is it possible way to do technically ?

Thanks

[Daniel]

@alexlii

Actually, I only use the Noto+Sans+SC, the total size is around 400MB, I can upload it to our server, do you think it is possible to reference that font from our local server?

I mean, is it possible way to do technically ?

Definitely, you would follow the instructions at the top of this post.
You would make a different font for each font weight in Hype.

[alexlii (Alex)]

@Daniel

the instructions at the top of this post.

so, do you mean this post, right?

How do I add SF UI Display + Text fonts to prototype for IOS9? (San Francisco Mac System Font)

BTW Here’s our documentation on adding fonts. Here’s a nice article that covers how to use the font: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ (Note: for a more updated guide (Feb 2018) to generating custom fonts with Font Squirrel, see this post.) Also note that Hype now allows you to select a ‘System Font’. See this post. Continue reading for generic information on how to use downloaded font files in your Hype document and target those fonts with CSS: So I downlo…

and I only need change

url('${resourcesFolderName}

to our local server address please?

or should I change the url of https://fonts.googleapis.com at Head Html to our local server?

[Daniel]

Checkout this tool:

https://google-webfonts-helper.herokuapp.com/fonts/noto-sans-sc?subsets=chinese-simplified,latin

If you select your font and use

${resourcesFolderName}/

in the Customize folder prefix (optional): section:

It produces this code:

/* noto-sans-sc-regular - latin_chinese-simplified */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  src: url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans SC Regular'), local('NotoSansSC-Regular'),
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.woff') format('woff'), /* Modern Browsers */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-regular.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}
/* noto-sans-sc-700 - latin_chinese-simplified */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  src: url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans SC Bold'), local('NotoSansSC-Bold'),
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.woff') format('woff'), /* Modern Browsers */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('${resourcesFolderName}/noto-sans-sc-v9-latin_chinese-simplified-700.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}

We will make a new Custom CSS font and paste that in, making sure to enclose that in <style>...</style>

Download all the fonts and drag them into the resources library, and add this font:

Here's a demo of those two fonts (regular and Bold).

@alexlii

and I only need change

url('${resourcesFolderName}

to our local server address please?

The 'resourcesfoldername' needs to be there, since it is replaced during export.

@alexlii

Daniel:

the instructions at the top of this post.

so, do you mean this post, right?

Yup, the instructions are practically the same when you have local files.

[alexlii (Alex)]

Thanks Daniel.

Success.

For me, I only want to reference the fonts by CSS, but not drag those fonts file into Hype everytime, otherwise, the Hype document will much big.

and here are what I did, for any others reference:

1# upload the downloaded file from https://google-webfonts-helper to our server with the directory of fonts.

2# The key here is that I used the ../fonts/ as directory in CSS, and without our local sever domain name, and also not ${resourcesFolderName}/, otherwise there will error at frontend, right way looks as following:

/* rouge-script-regular - latin */
@font-face {
  font-family: 'Rouge Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rouge-script-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Rouge Script'), local('RougeScript-Regular'),
       url('../fonts/rouge-script-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rouge-script-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/rouge-script-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/rouge-script-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/rouge-script-v8-latin-regular.svg#RougeScript') format('svg'); /* Legacy iOS */
}

And you may check the test page:https://www.lovcour.com/chinese-font/

3. The above way does not support preview the font in Hype, so, the only problem for me now, is that I need use Google font in Hype to preview, and change the custom CSS before upload sever, anyway, it works.

Thanks so much.