Having a black area around my custom font that I want to remove

Hi, after a lot of help I have managed to reach a watch that includes image and a custom font. Now I struggle with a different problem. I have a black areas around my displayed numbers like can be seen in this picture: https://ibb.co/Sf9Qymf . I have seen that the font png has a black area around it so I tried to use my Photoshop knowledge to make it as the same grey color I have in the watch to make it fit but apparently it has to stay full black (or else the numbers won't show up) and it is happening in the png with all of the fonts. It might be a problem with my project coding or something similar so I'll add an image of my project view file:  https://ibb.co/zPjcLWF

I have seen that in other watch faces the problem I have is not happening so I guess it is solvable. Can you please help me understand the problem and the way to solve it?

TY for everyone that will help in advance!