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

[NativeHealth_R]

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.

[Rajvi__patel]

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);
}

6. Use above font-family name(myFirstFont) wherever you want this fonts

[NativeHealth_R]

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

[Rajvi__patel]

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

[NativeHealth_R]

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: 

<div class="product-page--overline  customClass" data-item="overline">

{{- block.settings.text -}}

</div>
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