How to successfully apply a custom font on Shopify?

[SubhanTariq]

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

2. Methods I tried

3. Main page before applying custom font

4. Main page after applying custom font

Please need someone help to solve the issue

[BSS-Commerce]

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 !