How to successfully apply a custom font on Shopify?

How to successfully apply a custom font on Shopify?

SubhanTariq
Visitor
1 0 0

I am trying to use a custom font in Shopify by the method mentioned on shopify.dev page. After doing all the stuff when I inspect the page the font-family on the page changes but the font does not changes attaching some pictures below.
1) Font trying to use

SubhanTariq_0-1691879643611.png

2) Methods I tried 

SubhanTariq_1-1691879773042.pngSubhanTariq_2-1691879826719.png
3) Main page before applying custom font

SubhanTariq_3-1691880016398.png

4) Main page after applying custom font

SubhanTariq_4-1691880126338.png

Please need someone help to solve the issue

 

Reply 1 (1)

BSS-Commerce
Shopify Partner
3478 465 560

Hi @SubhanTariq ,

 

You can try replace your code to : 
 

@font-face {
  font-family: 'RubikWetPaint-Regular';
  src: url('path-to-font/rubikwetpaint-regular.woff2') format('woff2'),
       url('path-to-font/rubikwetpaint-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


h1, h2, h3, h4, h5, h6, p {
  font-family: 'RubikWetPaint-Regular' !important;
}

Hope it helps @SubhanTariq !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


Product Labels by BSS | B2B Solution & Custom Pricing


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency