Google Fonts: Local Font Files for Chinese Language)

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:

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

Thanks so much.

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:

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:

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

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

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.

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

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

so, do you mean this post, right?

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?

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).

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

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

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/

  1. 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.

3 Likes