src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx

@@ -41,12 +41,7 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
         <div className="mb-12">
           <ViewTransitionWrapper name="section-content">
             <div className="mb-16">
-              <h1
-                className="font-heading font-black leading-[1.2] mb-0"
-                style={{ fontSize: 'var(--text-section-title)', fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
-              >
-                {heading}
-              </h1>
+              <h1 className="font-heading font-black text-[var(--text-section-title)] leading-[1.2] mb-0">{heading}</h1>
             </div>
           </ViewTransitionWrapper>
           <ViewTransitionWrapper name="section-body">
@@ -59,10 +54,7 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
           aria-label={heading}
           className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0"
         >
-          <span
-            className="block font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
-            style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
-          >
+          <span className="block font-heading font-wonk font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
             {heading}
           </span>
         </Link>

src/shared/styles/theme.css

@@ -272,6 +272,13 @@
 .brutal-border-right {
   border-right: var(--border-width) solid var(--blue);
 }
+/* Apply Fraunces variable axes to non-heading elements using the heading font */
+.font-wonk {
+  font-variation-settings:
+    "WONK" var(--fraunces-wonk),
+    "SOFT" var(--fraunces-soft);
+}
+
 /* Sidebar divider: bottom border on mobile, right border on desktop */
 .brutal-border-sidebar {
   border-bottom: var(--border-width) solid var(--blue);