- This topic has 9 replies, 2 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
Hi,
Objective: I would want to use custom font “Adobe Kaiti Std R” in the website.
Issues: It seems like doens’t work given I follow all GP’s guide. See the comparison of fonts https://imgur.com/a/JHXIRve
Thus, I’m here looking for help to see what’s wrong on why the website font cannot be display like the demo font?
Steps I’ve done
1. Downloaded the font https://freefontsfamily.com/adobe-kaiti-std-r-font-free/.
2. Convert to ttf, woff, woff2 using https://cloudconvert.com/otf-to-ttf
3. uploaded files to website using FTP
4. Inserted CSS to the website@font-face { font-family: "KaiTi"; src: local(''), url("/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff2") format("woff2"), /* Super modern browser */ url("/wp-content/uploads/custom-fonts/Adobe-Kaiti-Std-Font.woff") format("woff"); /* Super modern browser */ }Can you please guide me on where is wrong since the font in the website is different from the demo font.
TQ
Melvin
Customer Support
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. 🙂
- You must be logged in to reply to this topic.
