How to change the font for product descriptions ONLY (EMPIRE 11.0 theme)

kwiksafety
New Member
4 0 0

We are trying to mass update the font of all our product descriptions because some product descriptions show multiple fonts (which we do not want), rather than just one.

Replies 5 (5)

sahilsharma9515
Shopify Partner
995 124 189

Hi @kwiksafety Please follow the steps.

 

  • Upload your font files: Upload your custom font files (e.g., .woff, .woff2) to your Shopify theme. You can do this by navigating to the "Online Store" section of your Shopify admin panel, selecting "Themes," and then clicking on "Actions" > "Edit code" for your current theme. In the theme editor, you can upload your font files to the "Assets" folder.
  • Add font-face rule in CSS: Once your font files are uploaded, you need to define a @font-face rule in your CSS to specify the font-family and the paths to your font files. You can add this rule to your theme's CSS file. Here's an example:

 

@font-face {
    font-family: 'CustomFont';
    src: url('{{ 'customfont.woff2' | asset_url }}') format('woff2'), /* Modern Browsers */
         url('{{ 'customfont.woff' | asset_url }}') format('woff'); /* Older Browsers */
    font-weight: normal;
    font-style: normal;
}
 

Replace 'CustomFont' with the desired name for your custom font and 'customfont.woff2' and 'customfont.woff' with the file names of your font files.

  • Apply the font to your styles: Once the font-face rule is defined, you can use the custom font by specifying font-family in your CSS styles. For example:

 

body {
    font-family: 'CustomFont', sans-serif;
}
 

Replace 'CustomFont' with the name you used in the @font-face rule.

  • Apply the font in your Shopify theme templates: Once you've added the font to your CSS, you can apply it to specific elements in your Shopify theme templates by adding custom CSS classes or modifying existing styles.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


kwiksafety
New Member
4 0 0

This may just be more complicated than my capabilities, so I could have done it wrong, but it did not work for me.

sahilsharma9515
Shopify Partner
995 124 189

Hi @kwiksafety If you have just copy pasted the above code that I have mentioned, then it will not going to work as it is a base code, you need to update the code according to your theme files and needs.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


PageFly-Henry
Astronaut
1090 312 264

Hi @kwiksafety 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

 

.product-description p {

    font-family: 'Montserrat' !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | 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.

kwiksafety
New Member
4 0 0

Tried this and it did not work. Not sure if it's just not overriding the code in the product description text boxes, but I will continue trying!