Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi everyone, I’m trying to add a custom font to my Shopify store that isn’t available in the theme settings (checkout). I want to use a Google Font for my headings and body text. Can someone guide me on how to upload and apply a custom font through code or theme customization? I’m using the Dawn theme. Thanks in advance!
Hey @chriswilly42,
Here is how you can add the custom font in the Shopify store.
Now you need to go Shopify Edit Code to define the custom font.
Go to Shopify Admin > Click on Online Store > Edit Code > base.css file.
This may be a base.css file or maybe a theme.css file. [depend on your theme file].
Now you have to paste this code in the end of base.css file.
@font-face {
font-family: 'MyCustomFont';
src: url('Paste the copied code here') format('woff2');
font-weight: normal;
font-style: normal;
}
In the URL you have to paste the actual URL of the file.
Now you name your font MyCustomFont. Now you can use it anywhere. Like I did for paragraph tag.
p {
font-family: MyCustomFont !important;
}
If this was helpful mark as Solution and Like it.
You can add a Google Font by linking it in your theme.liquid file’s <head> section sweetgreen nutrition calculator, then use CSS in base.css to apply it—did this with Dawn too and it worked great.