How do I use external fonts on existing blocks? Eg: description block on product page

Store Design
, ,

Topic summary

Main issue: Want to use externally uploaded fonts on existing Shopify theme blocks (e.g., Description, Buy button) so text remains editable in Customize.

What’s been tried: External OTF fonts were added and work in custom blocks. A reply recommends using webfont formats (WOFF/WOFF2), uploading them to Assets, declaring @font-face in the theme stylesheet, and applying the font-family to the relevant selectors.

Theme constraint: The “Beyond” theme doesn’t have theme.scss.liquid; it uses theme–critical.css.liquid and theme–async.css.liquid. The user asks where to place CSS for product button and other non-custom blocks in this theme.

New blocker: CSS (including font-family) doesn’t apply to existing blocks when a data-item attribute is present. Fonts only apply if data-item is removed from the HTML. The user requests an explanation of the data- attribute seen across Liquid templates.

Current guidance: Apply font-family to the specific classes where needed. No direct answer yet on the data-item attribute or exact file/placement for Beyond’s CSS.

Status: Unresolved. Key open questions: proper CSS location in Beyond theme and whether/why data-item affects styling.

Summarized with AI on February 3. AI used: gpt-5.
1

I have managed to import external OTF fonts into the assets folder and use them in custom blocks in my product page. I am looking to use these external fonts on blocks such as Description, to allow the text content to be edited from the customise tab.

2

Hiii @NativeHealth_R
You can try this code by following these steps:

  1. Download the Webfont version of your font.
  2. The font files must have the WOFF and WOFF2 file types includedFrom the Shopify dashboard, go to Online Store, click Actions > Edit Code.
  3. Add a New Asset. Choose your Font file and click Upload Asset
  4. choose Assets>theme.scss.liquid
  5. Go to the bottom of this file to add the new code to your theme
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
  1. Use above font-family name**(myFirstFont)** wherever you want this fonts
3

Where do i edit the CSS for the product button? I would appreciate information on how to edit existing NON-custom shopify blocks (eg: buy button, description, heading)

We have purchased the beyond theme, it does not contain theme.scss.liquid, it has theme–critical.css.liquid and theme–async.css.liquid

4

You have to pick that particular classes where you want to apply this font-family css.

5

except for external fonts, css doesn’t work on existing shopify blocks
Unless i remove the “data-item” tag in the .liquid file
for eg:

{{- block.settings.text -}}
fonts inside customClass dont work unless i remove "data-item="overline" Could you explain what the data- tag that appears across the liquid html does? Thanks in advance