Fix Heading Font Weight & Style in Shopify Sense Theme

Store Design
, , , ,
1

Hello Everyone!

I’m using the Shopify Sense theme and I’ve added custom fonts through custom coding. Currently, both the heading font and body font appear to be the same, but the heading font doesn’t look clear enough.

I want the heading font to keep the same font-family as the body font while maintaining proper heading styling, especially the correct font-weight and font-style so that it looks clearer and more readable. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

I’m using the following code:

@font-face {
font-family: “Sephora_Hayden”;
src: url(“https://cdn.shopify.com/s/files/1/0717/6831/0072/files/Sephora_Hayden.woff2?v=1777383734”) format(“woff2”);
font-weight: normal;
font-style: normal;
font-display: swap;
}

/* ULTIMATE CUSTOM FONT FIX FOR SAVOR THEME */
body, p, a, li, span, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.product-badges__badge,
summary,
.details__header,
.email-signup__heading,
.email-signup__input,
input,
select,
option,
button,
.button,
.price,
.rte p,
.facet-filters__sort,
.product-count__text {
font-family: “Sephora_Hayden”, sans-serif !important;
}

Sample
Sample892×127 17.8 KB

2

This code may work (even though it’s not SAVOR), but I personally would never recommend something like this.

Sense theme uses 2 CSS variables to control font-family and it’s only natural to redefine those variables to let the theme code use these custom fonts.

Like this – no need to list all elements, no need for !important:

body {
  --font-body-family: Sephora_Hayden, sans-serif;
  --font-heading-family: Sephora_Hayden, sans-serif;
}

Also, sans-serif is not the best fallback for this custom font, I’d probably rather use cursive.

Finally, I'd never recommend this kind of font for anything other than some decorative elements page, certainly not for text content.

Having said that – some fonts are designed for higher overlapping between characters which makes them more decorative, but harder to read.

This font, in particular, overlapping is much higher on uppercase characters.

I’d try using letter-spacing to override this, but it does not distinguish between lower and upper case, so would negatively affect, say, titles in product cards:

h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
   letter-spacing: calc(var(--font-heading-scale) * 0.3rem); /* default is 0.06rem here */
}
3

Hi @dreamtechzone_5

Step 1: Add multiple font weights.

If your font supports different weights, add them like this:

@font-face {
  font-family: "Sephora_Hayden";
  src: url("YOUR-FONT-URL.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sephora_Hayden";
  src: url("YOUR-FONT-URL-BOLD.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Step 2: Apply proper styling for headings

h1, h2, h3, h4, h5, h6 {
  font-family: "Sephora_Hayden", sans-serif !important;
  font-weight: 700; /* makes headings clearer */
  letter-spacing: 0.5px;
}

Step 3: Keep body text normal

body, p, a, li, span {
  font-family: "Sephora_Hayden", sans-serif !important;
  font-weight: 400;
}

Best regards,
Devcoder :laptop:

4

Hi, @dreamtechzone_5

Your @font-face only defines one font weight/style (normal) – that’s the problem.

So even if headings (h1, h2, and other heading ) try to use bold weights, the browser only has the normal one available, making headings look thin or unclear.

Your CSS also applies the same styling for everything with !important at the moment.

Replace your code with this cleaner version:


@font-face {

  font-family: 'Sephora_Hayden';

  src: url('https://cdn.shopify.com/s/files/1/0717/6831/0072/files/Sephora_Hayden.woff2?v=1777383734') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

/* Body Text */

body,

p,

a,

li,

span,

input,

select,

option,

textarea,

.rte p,

.price {

  font-family: 'Sephora_Hayden', sans-serif !important;

  font-weight: 400;

  font-style: normal;

}

/* Headings */

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6,

.email-signup__heading,

.details__header {

  font-family: 'Sephora_Hayden', sans-serif !important;

  font-weight: 700 !important;

  font-style: normal;

  letter-spacing: 0.5px;

  line-height: 1.2;

}

/* Buttons */

button,

.button,

summary,

.product-badges__badge {

  font-family: 'Sephora_Hayden', sans-serif !important;

  font-weight: 600;

}
5

Hey @dreamtechzone_5,

Sounds like your custom @font-face is loading the same weight/style for both the heading and body, so visually they collapse together. Two common causes:

  1. You loaded only one weight (e.g. Regular 400) but your headings are inheriting that instead of a Bold/700. Make sure you’ve actually @font-face’d the bold variant separately, with font-weight: 700 inside the rule.

  2. Sense’s heading rules already include things like letter-spacing or text-transform, if your custom CSS overrides them entirely, the visual hierarchy drops.

Try something like this in your custom CSS:

h1, h2, h3, h4, h5, h6 {
font-family: ‘YourCustomFont’,
sans-serif;font-weight: 700;
letter-spacing: -0.02em;
}

If the heading still looks identical to body, inspect the heading in the browser and check the “computed” tab, that’ll tell you which font-family and weight is actually rendering vs what you intended. Often the issue is a more specific theme rule winning the cascade.