How can I change the typeface for specific text elements in my store?

Store Design
, , ,

Topic summary

A user is trying to override their store’s default Poppins typeface with Roboto Mono for specific elements—product prices and body copy—but their CSS attempts are failing.

Attempted solutions:

  • Targeting .product-block_title with custom font-family, size, weight, and color properties
  • Using @font-face declarations to load custom font files (.woff, .woff2)
  • Applying inline styles with !important flags to .product.price elements

Current status:
Both methods have not worked. The user is seeking troubleshooting help to identify what’s going wrong in their CSS implementation. They mention using a paid Shopify theme (text appears partially corrupted/reversed in the original post).

Key context:
This is a CSS customization issue within a Shopify store environment, requiring proper font loading and selector targeting.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone

I have set both my stores typeface to Poppins, but I am wanting to change specific text elements to Roboto Mono

(product price in all locations on site and also body copy)

I have attempted using the following codes:

product-block_title {
font-family: robotomono;
font-size: 4rem;
font-weight: regular;
line-height: 1.2;
letter-spacing: 1px;
color: red;
margin: 0;

@font-face {
font-family: “NAME OF FONT”;
src: url(“NAME-OF-FONT-FILE.woff2”) format(“woff2”),
url(“NAME-OF-FONT-FILE.woff”) format(“woff”);
}

product.price { font-family: “NAME OF FONT”!important; }

Both methods fail to work

Am I doing something wrong?

Thank you!

(I am using Paid shopify theme Modular)