How to change the fonts for these specific headings?

[selinadg]

These used to be in the font I wanted but not sure if Shopify had an update? Referring to these sections:

The product names such as “Sleeping Giant Bath Mat” etc. As well as @DAYOFFHOMEGOODS.

Here’s my shop URL: https://dayoff.shop/

[drakedev]

The easiest way to change the font setting in your Debut theme by going to Theme settings > Typography and then choose the desired font

There are other possibilities to, but I suggest to not mix-up too many fonts in your theme for performance and speed load.

[selinadg]

I’m currently using a custom font Acumin. Hoping to change it back to that thanks.

[drakedev]

Debut doesn’t support uploading custom fonts out of the box.

In order to achieve this you need to use an app (like Fontify for example) or upload the custom font to your Theme asset and implement the correct font-face inside your theme CSS file.

CSS > @font-face

e.g.

@font-face {
    font-family: 'font-family-name';
    src: url('{{ 'font-family-name.eot' | asset_url }}');
    src: url('{{ 'font-family-name.eot' | asset_url }}?#iefix') format('eot'),
         url('{{ 'font-family-name.woff' | asset_url }}') format('woff'),
         url('{{ 'font-family-name.woff2' | asset_url }}') format('woff2'),
         url('{{ 'font-family-name.ttf' | asset_url }}') format('truetype'),
         url('{{ 'font-family-name.svg' | asset_url }}') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

and then adapt the declarations in your Debug theme file css-variables.liquid to use your new font family name definition

--font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
    --font-style-header: {{ header_font.style }};
    --font-weight-header: {{ header_font.weight }};

    --font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
    --font-style-body: {{ base_font.style }};
    --font-weight-body: {{ base_font.weight }};