Hi!
(the font GPB is customized on our own, so the credit belongs to us which it’s okay to use them free)
I have my custom font ready in .ttf format (which I think Shopify take that?) and I tried having custom codes for my font inside the theme.scss.liquid coding sheets:
After I save the new code with the ttf file added inside Assets coding sheets, the fonts in my webpage changed to a different font but not my own custom font. (The changed font is more like a Time New Rome one).
I do have woff2 format but Shopify does not allow me to add it inside the Assets coding section, I’ve tried multiple times but it won’t appear on the coding section. the woff2 format was converted online, I cannot find other ways to get ttf to woff2.
Is there anything I could do to fix this problem?
Thank you!
Hi @banroworld ,
Its strange that you cant upload the woff2 file under asset folder. in any case please use the following format
@font-face {
font-family: "Font name";
src: url({{ "Filename" | asset_url }}) format("Format");
}
If you are using ttf use the “truetype” as format and not .ttf
I think .ttf should be fine, but if it’s not working convert it to woff instead of woff2 because I know for sure that works, I don’t believe Shopify supports woff2. Also opentype I know works. Try like this with your @fontface declaration:
@font-face {
font-family: 'GPB';
src: url({{ 'GPB.ttf' | asset_url }}) format("truetype");
}
Hi!
Thank you for helping me out.
I tried with the code, but unfortunately it’s still not working…I can sure that my .ttf file is working, but the ttf was converted from a TIF file, will this be the problem?
On the other hand, I am not sure what other custom font .ttf looks like, but mine looks like this:
So like everything was in a blank page…(this might also be the problem??
And for now the font on my website still looks like a Time New one:
