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

[ac5a]

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?

[Made4uo-Ribe]

Hi @ac5a

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

How to add a custom font to a Shopify theme 2024

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

[PageFly-Noah]

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:

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

Hope this can help you solve the issue

Best regards,

Noah | PageFly

[ac5a]

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”);
}