/* ========================================================================== Site-wide typeface: Lovelo Black Loaded LAST in every page so it wins over theme/template fonts. - The face is declared across the whole weight range so every font-weight (300…1000) maps onto the single Black file without the browser synthesising a faux-bold on top of it. - Lovelo has no glyphs for "@" or "₺" (and other rare symbols); the fallback stack renders those characters instead. - Icon fonts (Font Awesome, Material Design Icons) and code blocks are excluded, otherwise icons turn into letters/empty boxes. ========================================================================== */ @font-face { font-family: "Lovelo"; src: url("../fonts/lovelo/Lovelo-Black.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-lovelo: "Lovelo", "Poppins", "Segoe UI", system-ui, sans-serif; } /* Keep this selector on ONE line: whitespace between the :not()s would turn it into a descendant combinator and silently change what matches. */ *:not(pre):not(code):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not([class^="fa-"]):not([class*=" fa-"]):not(.mdi):not([class^="mdi-"]):not([class*=" mdi-"]) { font-family: var(--font-lovelo) !important; } /* -------------------------------------------------------------------------- Reading-area exemption (treatment articles, static/css/treatments.css). Lovelo is a caps-only display face, which is hard to read in long text, so article body copy (.td-rich, .td-faq, .td-steps, .td-compare, .td-read, list-card excerpts) uses Poppins, already loaded by base.html. Headings inside those areas keep Lovelo. Why @layer: the rule above has specificity (0,12,4) from its :not() chain, which no normal selector here can outrank. An !important declaration inside a cascade layer beats an unlayered !important one, whatever the specificity. -------------------------------------------------------------------------- */ @layer lumben-reading { :is(.td-rich, .td-faq, .td-steps, .td-compare, .td-read, .tl-card__excerpt), :is(.td-rich, .td-faq, .td-steps, .td-compare, .td-read, .tl-card__excerpt) :not(h1, h2, h3, h4, .fa, .fas, .far, .fab, [class*="fa-"], .mdi, [class*="mdi-"]) { font-family: "Poppins", "Segoe UI", system-ui, sans-serif !important; } }