Impact Theme - Custom Font Stopped Working after update

Solved

Impact Theme - Custom Font Stopped Working after update

terilanier
Tourist
5 0 2

Hello Community,
We successfuly used this code on theme.css with Impact 6.1.0

 

 

.h0 {
  font-family: "winlove";
  font-size: var(--text-h0);
  line-height: 1;
}

 

 

After updating to 6.2, it no longer loads our font.
Our font is a .ttf file stored in the assets folder. 
We tried the same code above and it did not load and we tried the @font-face approach to define our font-family with defined file path. These approaches did not work, so we have not yet published the 6.2 theme of www.viridianbay.com.
Photo attached is how we want the custom font to appear on the home page.
How do we get our custom font to appear like it did in the old Impact theme?

Screenshot 2024-08-27 134145.png

Accepted Solution (1)

VB-GraphicsTeam
Visitor
1 1 1

This is an accepted solution.

If you have your custom font added as an asset on shopify you can use the below font to theme.liquid file 

 

{% unless settings.custom_font.system? -%}
  <link rel="preload" href="{{ 'your-font-here.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>
{% endunless %}

 

 This is an example of how we used the code to style h2 in the assets/theme.css file 

 

h2 {
  font-family: 'winlove', sans-serif;
}

 

 

View solution in original post

Replies 2 (2)

mvh
Visitor
1 0 0

I'm failing to install any custom fonts in the Impact theme, which I bought for the first time yesterday. Really hope there's a fix for this given the price point. 

VB-GraphicsTeam
Visitor
1 1 1

This is an accepted solution.

If you have your custom font added as an asset on shopify you can use the below font to theme.liquid file 

 

{% unless settings.custom_font.system? -%}
  <link rel="preload" href="{{ 'your-font-here.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>
{% endunless %}

 

 This is an example of how we used the code to style h2 in the assets/theme.css file 

 

h2 {
  font-family: 'winlove', sans-serif;
}