Shopify themes, liquid, logos, and UX
Hi,
My custom font won't show the right font in the preview when I send the web link to my client. It is the correct font on my own computer and the wrong font on any other computer.
Please see below for the code: (assets/theme.css):
@font-face {
font-family: "FKGrotesk-Regular.otf";
src: url('{{ "FKGrotesk-Regular.woff" | asset_url }}') format("woff"),
url('{{ "FKGrotesk-Regular.woff2" | asset_url }}') format("woff2"),
url('{{ "FKGrotesk-Regular.ttf" | asset_url }}') format("truetype"),
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, p, li, #nav li a, div.title a, .headline, .subtitle { font-family: "FKGrotesk-Bold" !important; }
ul, ul a { font-family: "FKGrotesk-Regular" !important; }
View of the correct font.
The wrong font in preview:
Please let me know if you can help!
Thanks for post and goof try your code but something is missing. can you please flow below code
Yes, you can do easy to upload your custom font
1. Go to Online Store->Theme->Edit code
2.Asset->/theme.css.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.css.liquid->paste below code at the bottom of the file.
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
can you please just change font name, for example, Montserrat-Regular to your custom font name
also make sure all font file upload
Thank you so much, this worked for me too once I added code at the end to apply the font to headings etc
it's my pleasure to help us
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024