@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap"); /* * Shared editorial typography voice. * * To adopt on another page: * 1. Add: * 2. Add class="voice-editorial" to or another wrapping container * 3. Use the variables below in page CSS instead of hardcoded font names */ .voice-editorial { --voice-body-font: "Public Sans", sans-serif; --voice-display-font: "Fraunces", serif; --voice-data-font: "Public Sans", sans-serif; --voice-mobile-display-font: var(--voice-display-font); } .voice-editorial { font-family: var(--voice-body-font); } .voice-editorial h1, .voice-editorial .hero-title, .voice-editorial .section-title, .voice-editorial .tool-title, .voice-editorial .closing-title, .voice-editorial .action-title, .voice-editorial .header-title h1 { font-family: var(--voice-display-font); letter-spacing: -0.006em; } .voice-editorial .mono, .voice-editorial .spot-price, .voice-editorial .spot-change, .voice-editorial .summary-value, .voice-editorial .metric-value, .voice-editorial .meta-value, .voice-editorial .chart-stat-value { font-family: var(--voice-data-font); } .voice-editorial .voice-display { font-family: var(--voice-display-font); } .voice-editorial .voice-body { font-family: var(--voice-body-font); } .voice-editorial .voice-data { font-family: var(--voice-data-font); } @media (max-width: 768px) { .voice-editorial h1, .voice-editorial .hero-title, .voice-editorial .section-title, .voice-editorial .tool-title, .voice-editorial .closing-title, .voice-editorial .action-title, .voice-editorial .header-title h1 { font-family: var(--voice-mobile-display-font); } }