Trying to change the font for a specific section using CSS

Store Design
, ,
1

Hey folks, I’m trying to change the font of a specific section, and it’s not working for some reason.

A few notes:

  1. The font size is changing just fine
  2. Adjusting the CSS in Chrome’s inspect tool seems to work just fine
  3. I’ve tried other system fonts, and no matter what I can’t get the font family to actually change
h2.dsgn-pck__heading {
  font-family: 'Amonos Display Medium';
  font-size: 50px;
}

In case the problem is with my custom font loading, here’s what I have:

In themes.css.variables I’ve added

{%- style -%}

  @font-face {
  font-family: 'Amonos Display Medium';
  src: url("{{ 'amonosdisplaymedium.woff2' | asset_url }}") format('woff2'),
    url("{{ 'amonosdisplaymedium.woff2.woff2' | asset_url }}") format('woff');
}

Any help would be GREATLY appreciated!

2 
h2.dsgn-pck__heading {
  font-family: 'Amonos Display Medium' !important;
  font-size: 50px;
}

By adding !important at the end of the font-family declaration, you ensure that the specified font is applied even if there are other rules attempting to override it.

1 Like
3

Thank you SO much!

1 Like