Notifications
Clear all
Topic starter
07/12/2021 11:17 am
Would you like to use custom fonts in your Shopify store and stand out from the crowd ? Well, this tutorial will let you add custom fonts without the need to use any third party app.
As an example, in this tutorial I will use Consolas font on Plak theme.
Spoiler
Step 1 - Download the font
Download your custom font. The font files must include at least the .woff and .woff2 file types (ttf or otfare not a webfont file types on Shopify).
I downloaded Consolas font from this site
Spoiler
Step 2 - Upload the font
After having downloaded your desired font, now it is the time to upload it to your Shopify store.
- From your Shopify dashboard, click Online store > Actions > Edit code
- Under Assets, click Add a new asset
- Upload the font files that have the extensions .woff and .woff2
- In this example I uploaded consolas.woff and consolas.woff2
Spoiler
Step 3 - Render the font CSS
Now that the font files have been uploaded to your Shopify store, we need to render them to be ready to use.
- From your Shopify dashboard, click Online store > Actions > Edit code
- Open the file theme.liquid
- Just before the closing tag , add the following code
@font-face {
font-family: "consolas";
src: url("consolas.woff2") format("woff2"),
url("consolas.woff") format("woff");
font-display: swap;
}
{% endstyle %}
- Replace the name consolas with your own font name (it must be exactly the same name as the file name you uploaded before)
- Click Save
Spoiler
Step 4 - Change your current store font
Your theme uses the font that you have selected on the theme editor, since you have uploaded a custom font, now you need to change your store font to the one you uploaded.
- From your Shopify dashboard, click Online store > Actions > Edit code
- For Plak theme, open the files theme.css and homepage.css
- If you have any other file extension .css, you need to open it too to replace your entire store font with the new one
- Search every line that begins with font-family and replace it with :
font-family: "your_font_name";
- Since I used the font consolas in my example, I will use this code
font-family: "consolas";
- Click Save
If you have any questions in regards to this topic, feel free to comment below and I would be glad to help 🙂
Katrine
17/12/2021 9:22 pm
Hello,
THanks for this.
Ok I did all the changes for Consolas and everything is showing in Consolas.
Actually - I didnt want ALL in Consolas. Just the Headings / product titles / buttons etc.
So I just need to change BODY TEXT BACK to Monserrat. (body text including product descriptions and everywhere body text is used such as image with text (body text section)
Please give instructions... thanks.
Topic starter
18/12/2021 9:12 am
Hello,
THanks for this.
Ok I did all the changes for Consolas and everything is showing in Consolas.
Actually - I didnt want ALL in Consolas. Just the Headings / product titles / buttons etc.
So I just need to change BODY TEXT BACK to Monserrat. (body text including product descriptions and everywhere body text is used such as image with text (body text section)
Please give instructions... thanks.
If you would like to change not the body text including the product description, you need to add this code at every .css file
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
input,
a,
textarea,
button,
select {
font-family: "consolas" !important;
}
Let me know if you need further help with this
kind regards,
Katrine
18/12/2021 5:57 pm
OK I added that code to all 6 css files in assets section... still everything is showing in consolas. Is it because of all the changes I did in step 4 of the tutorial?
Topic starter
18/12/2021 8:21 pm
Hello,
THanks for this.
Ok I did all the changes for Consolas and everything is showing in Consolas.
Actually - I didnt want ALL in Consolas. Just the Headings / product titles / buttons etc.
So I just need to change BODY TEXT BACK to Monserrat. (body text including product descriptions and everywhere body text is used such as image with text (body text section)
Please give instructions... thanks.
If you would like to change not the body text including the product description, you need to add this code at every .css file
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, input, a, textarea, button, select { font-family: "consolas" !important; }Let me know if you need further help with this
kind regards,
Katrine
@salafi1981 instead of the step 4, use the code shown in my previous answer, let me know if it worked for you 🙂
Katrine
18/12/2021 10:55 pm
But i already did all of step 4...so how do I change back
19/12/2021 1:35 pm
Can you resend the original files please for theme.css and homepage.css so I can revert back to the old version
Welcome to the Shopify Forum Community provided by Plak ThemeLLC, a place where you can discuss about eCommerce and Shopify, solve technical issues, get help with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.
Before posting, we invite you to read and follow the forum rules | We also support any questions related to Free Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Boundless and Simple