How to cache RichText font in Cocos Creator 3.5.0

Cocos Creator
#1

I tried to use RichText component and use my own font (not system font). The fonts are OK and correctly loaded when I run it on browser for debugging.

image
image570×569 30.5 KB

But the problem is that when I run it on the android device, the font is not loaded and it use Arial instead.

Is there any way to solve it? I remember that we have Cache in Label component, but I couldn’t found it on RichText.

I am making a game for Android device using Cocos Creator 3.5.0

#2

Check if the font-family and font-name of ttf fonts are the same.

#3

The Font-Family property is not available on the RichText in 3.5.0

image
image591×617 31.6 KB

#4

Can you show the font you are using now?

#5

It’s showing on my screenshot above.
Font is Silkscreen-Regular.ttf

#6

Can you give me your font for test?

#7

you can download it here: https://fonts.google.com/download?family=Silkscreen

Anyway, it happen on all fonts that I tried. Even Calibri…

#8

企业微信截图_16645035378738
企业微信截图_166450353787381516×846 49.8 KB

The font-family and font-name are not the same. You can use this tool to change the font:FontCreator for Windows - the most popular font editor

#9

I have tried it:

image
image695×233 8.09 KB

Still no luck, the font still not loaded.

here is the font

#10

i have test with the font you give, all works well, here is my demo:
57256.zip (38.9 KB)
and here is screenshot in my phone, my phone is huaweiP30Pro

d95e1cf55144b847298b3d83e315412
d95e1cf55144b847298b3d83e3154122340×1080 50.5 KB

#11

it’s RichText, not Label component, right?

#12

i don’t know why it’s still not working on mine:

image
image779×525 90.1 KB

It work if i use Label, but it doesn’t work in RichText

#13

I tried to log the Font and FontFamily of the RichText:

D/jswrapper: JS: Popup_Manager::show_credits() Font GUI =  assets/main/native/2a/2a613d4e-f148-4a8b-9cc7-e07a5ff8f58f/Silkscreen.ttf
2022-10-01 02:10:06.982 13860-13903/com.juarasatu.muscleman
D/jswrapper: JS: Popup_Manager::show_credits() FontFamily GUI =  Arial

By default even after I use the font file it always have ARIAL as the Font-Family. And i though if I manually change it to Silkscreen it will work. But turns out it doesn’t.

RichText.FontFamily = "Silkcreen";
#14

Can you make a demo of this part of your project and send it to me?

#15

I solved it :slight_smile:

But it’s quite weird one.
So, the steps are:

  1. On the RichMedia component, select “Use System Font”.
  2. Then set the “Font Family” properties to the correct one. In this case “Silkscreen”
  3. Unselect “Use System Font”
  4. Select the font to use (Silkscreen)

And it works just like that. I don’t know why, but it works. :slight_smile:
This work for original font file (from google.fonts) and the one I edited to changes the Font Family attribute.