How can I use a custom font in the Showcase theme?

Solved

How can I use a custom font in the Showcase theme?

ac5a
Shopify Partner
14 0 5

Hi, 

 

I am trying to use a custom font on the showcase theme. 

 

However, the code that I tried to use does not work. 

 

 

I have added both the font files in the assets section and the files folder under content. 

 

Does anyone have any ideas on what code I should try? 

Screenshot 2023-10-30 at 8.58.28 PM.png

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

 

Hi @ac5a 

 

This is Noah from PageFly - Shopify Page Builder App

 

You will need to place the correct source of the font assets to your code font like this screenshot:

PageFlyNoah_0-1698798797403.png

Please notice how i place the source of the font here.

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
6884 1640 2025

Hi @ac5a 

 

Try to follow the video below, we also posted other options in our blog. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

 

Hi @ac5a 

 

This is Noah from PageFly - Shopify Page Builder App

 

You will need to place the correct source of the font assets to your code font like this screenshot:

PageFlyNoah_0-1698798797403.png

Please notice how i place the source of the font here.

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ac5a
Shopify Partner
14 0 5

Thanks, worked!

 

Posting my code here in case it helps others in the future

 

@font-face {
font-family:"My Font";
src: url("{{ 'MyFont.woff' | asset_url }}") format("woff"),
url("{{ 'MyFont.woff2' | asset_url }}") format("woff2");
font-display:auto;
}

@font-face {
font-family: "My Font";
font-display: fallback;
src: url("https://cdn.shopify.com/s/files/1/0744/4204/7765/files/MyFont-Regular.woff2?v=1695992266") format("woff2"),
url("https://cdn.shopify.com/s/files/1/0744/4204/7765/files/MyFont-Regular.otf?v=1695992266") format("opentype");
}