How does browser pickup the right font file via font-family value?

0
votes

I copied some new fonts files , Apple's PingFang files, many .ttf files, to my CentOS /usr/share/fonts dir and rebuild the font cache via command fc-cache -fv , it seems success. But when I run fc-match 'PingFang', the result is not the newly installed font file. What is the matter?

Another related question is , for the Apple's PingFang family , there are many files, like PingFang Bold.ttf PingFang ExtraLight.ttf PingFang Heavy.ttf PingFang Light.ttf PingFang Medium.ttf PingFang Regular.ttf, what is the right family name for each font file if I want the browser render using specific font file?

1
htmlcssfonts

1 Answers

0
votes

For putting a local .ttf font in your css and specifying bold, medium, or whatever style in the family, where font-family below is the alias of the specified weight:

@font-face {
    font-family: "PingFang";
    src: url("PingFang-Medium.ttf") format('truetype'); 
}