Join the Webstudio community

Updated 6 months ago

Giant custom fonts

At a glance
The community member is trying to upload the Noto Sans SC font, but is facing an error that the asset cannot be bigger than 4.5MB. The comments indicate that Chinese fonts can be very large, up to 10MB per file, due to the large character set. The community members discuss that it is not feasible to use custom Chinese fonts due to the large file sizes, and recommend using "web safe" Chinese fonts instead. The community members also mention that they plan to implement a font optimizer to extract only the used characters, and in the meantime, recommend using web safe fonts or embedding the font using external services. There is no explicitly marked answer.
Useful resources
Hi, I am trying to upload some google fonts, Noto Sans SC but facing the following error: Asset "NotoSansSC-VariableFont_wght.ttf" cannot be bigger than 4.5MB. Is it possible to increase the limit? Thanks.
O
C
16 comments
something is wrong with your font, it can't be that big, otherwise you will force every user to download it
downloading now to see
indeed 10 mb each variant or 17mb variable font
Attachment
image.png
Are all chinese fonts this big or is this one an exception?
https://blog.minitheory.com/5-high-quality-chinese-webfont-services-for-your-next-chinese-web-project/#:~:text=Chinese%20character%20set%20is%20huge,to%2010%20MB%20per%20file.

Chinese character set is huge. A standard Chinese character set consists of about 10,000 unique characters, with only 3,000 of those characters common in daily use.

Because of the huge set of characters, Chinese font sizes normally range from 5 to 10 MB per file. Due to this reason, it is not feasible to use CSS @font-face embedding unless your website’s users have ultra-high internet speed. For a long time, people resort to using only “web safe” Chinese fonts, which are:
宋体, Song Ti, a serif typeface used in most older websites.
黑体, Hei Ti, a sans-serif that resembles “Helvetica”.
幼圆, You Yuan, a rounded font like comic-sans, but not as notorious.
隶书, Li Shu, a brush script.
微软雅黑, Microsoft Ya Hei a sans-serif, arguably the most modern-looking Chinese web safe font available. It is available on Windows operating systems since Vista.
For Mac OSX users, there is also a good choice: Hiragino Sans GB. It is a high quality sans-serif typeface similar to Microsoft Ya Hei on Windows.
Ok here is what we can do:
  1. for now we won't support uploading giant font files
  2. we need to add font optimizer that will extract just what's used on the page. We need this also for all other fonts
Until we have implemented this optimizer I am afraid my recommendation is to stick with web safe chinese fonts.

If you really don't care about your users you can embed the font using google api or check out the other font libraries mentioned in that article, they mentioned some have ability to optimize
What I am noticing we need to fix is that you currently can't choose Song Ti, Hei Ti and others from the list at all without uploading them.
If these fonts are considered web safe, then they should be in the list of the fonts.
Current workaround is to use hmtl embed or project settings to set the font family on the body

this is going to render that font and on my machine it actually renders the right glyphs, seems like it is indeed installed
Attachment
image.png
Giant custom fonts
@Cleven we released a builtin support for 2 chinese web safe fonts already in production and you can now also specify a custom font family yourself
Attachment
image.png
Got it. Thank you very much 🙏
Add a reply
Sign up and join the conversation on Discord