Custom Fonts size is big makes loading page much slower?

How To
1

Hello!

I would like to know how to set Custom Fonts correctly to reduce the loading speed.

  • I have to use 2 sets of Chinese fonts, one is normal, one is bold.
  • I download TTF from Google and convert to WOFF2, but each font still costs 3 MB!
  • I disable Google Fonts in Brick and LiteSpeed Cache

I tested 2 versions of my site, one is Custom Fonts, one is Adobe Cloud Font.
Custom Fonts version needs to download 6 MB fonts, much slower than Cloud Font version, 2nd one only has 180 KB.

I am sure I am doing right to setting Custom Fonts, but they are too heavy to slow down loading speed.
The result is not what I expected, could you give me some advices? :melting_face:

2

use for dowload fonts woff2 google webfonts helper

2 Likes
3

Wow, thank you! :+1:

Update more information and result

  • woff2 by google webfonts helper is much smaller (1 MB), but normal and bold fonts still needs 2 MB :sweat_smile:
  • I guess Chinese font is too big, maybe use cloud font is smaller?
4

If font size is important, you can opt out of bold font. The best way to do this is to use css styles and, for example, a shadow.

2 Likes
5

2023-12-19_16-25-33
2023-12-19_16-25-33932×367 24.9 KB

:slight_smile:

1 Like
6

It is a good idea by using shadow of text, Thank you! :+1:

7

Or try this tool

I don’t know if it helps with Chinese, but I can only use it to integrate certain subsets (e.g. Latin). This makes my fonts much smaller

2 Likes
8

Thank you, It is another good idea, I will try it tomorrow! :+1:

9

exactly that’s right