Custom Chinese Font Not Working

Hi Melvin,

Can you try changing the URL from relative path to full URL? (include the domain)

Hi,

I've tried

@font-face {
  font-family: "KaiTi";
  src: local(''),
  	   url("https://url/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff2") format("woff2"), /* Super modern browser */
  	   url("https://url/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff") format("woff"); /* Super modern browser */
}

It still the same.

FYI, I've imported 2 other custom fonts which work fine with the exact same steps I did above. Only this chinese KaiTi doens't work thats why I seek for your help.

TQ

Melvin

Can you try if using the non-converted file? (ttf)

This is to check if the issue is with the conversion from ttf to woff.

Hi Elvin,

Thanks for your quick reponse.

I tried ttf and is still not working.

@font-face {
  font-family: "KaiTi";
  src: local(''),
  	   url("https://url/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.ttf") format("truetype"), 
  	   url("https://url/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff") format("woff"); /* Super modern browser */
}

FYI, the non-converted file is not ttf but otf which I downloaded here https://freefontsfamily.com/adobe-kaiti-std-r-font-free/. Then only I converted to otf to ttf, woff, and woff2 using https://cloudconvert.com/otf-to-ttf.

Kindly assist Elvin.

Tq

Melvin

FYI, the non-converted file is not ttf but otf which I downloaded here https://freefontsfamily.com/adobe-kaiti-std-r-font-free/. Then only I converted to otf to ttf, woff, and woff2 using https://cloudconvert.com/otf-to-ttf.

Ah if that's the case let's use the source OTF file for the purpose of testing.

To be sure if the process of conversion breaks the font file.

Ok,

How to use OTF file? From GP documentation I didn't see that.

Could you please guide me?

Tq

It's pretty much the same as what you did w/ TTF and WOFF.

Upload the file on the same folder and add the URL on the @font-face importation.

Example:

@font-face {
  font-family: "Adobe Kaiti Std";
  src: local('Adobe Kaiti Std'), local('Adobe-Kaiti-Std'),
  	   url("https://rakanda.kawanelite.com/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.otf") format("opentype"), 
  	   url("https://rakanda.kawanelite.com/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.ttf") format("truetype"), 
  	   url("https://rakanda.kawanelite.com/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff") format("woff"); 
}

Hi Elvin,

Following your guide, the custom font successfully imported.

and this is the code i used

@font-face {
  font-family: "Adobe Kaiti Std";
  src: local(''),
	   url("/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.otf") format("opentype"), 
  	   url("/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.ttf") format("truetype"), 
  	   url("/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff") format("woff"); /* Super modern browser */
}

So in this case, what's the issue you think it's ya?

TQ

Melvin

So in this case, what’s the issue you think it’s ya?

I think the ttf and woff files you're using are broken. The conversion site you've used doesn't seem to be working as intended. :)