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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024