+17 -12

app/globals.css

··· 62 62 --shadow-md: 1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1), 63 63 5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15); 64 64 65 65 - --font-sans: var(--theme-font, var(--font-quattro)); 65 65 + --font-sans: var(--font-quattro); 66 66 --font-serif: Garamond; 67 67 } 68 68 ··· 158 158 } 159 159 160 160 /* START FONT STYLING */ 161 161 - h1, 162 162 - h2, 163 163 - h3, 164 164 - h4 { 165 165 - font-family: var(--theme-heading-font, var(--theme-font)); 166 166 - } 167 167 - 168 161 h1 { 169 162 @apply text-2xl; 170 163 @apply font-bold; ··· 200 193 @apply hover:underline; 201 194 } 202 195 203 203 - pre { 204 204 - font-family: var(--theme-font, --font-quattro); 205 205 - } 206 206 - 207 196 p { 208 197 font-size: inherit; 209 198 } ··· 211 200 ::placeholder { 212 201 @apply text-tertiary; 213 202 @apply italic; 203 203 + } 204 204 + 205 205 + /* Scope custom fonts to document content only (not sidebar/UI chrome) */ 206 206 + .pageScrollWrapper { 207 207 + font-family: var(--theme-font, var(--font-quattro)); 208 208 + } 209 209 + 210 210 + .pageScrollWrapper h1, 211 211 + .pageScrollWrapper h2, 212 212 + .pageScrollWrapper h3, 213 213 + .pageScrollWrapper h4 { 214 214 + font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro))); 215 215 + } 216 216 + 217 217 + .pageScrollWrapper pre { 218 218 + font-family: var(--theme-font, var(--font-quattro)); 214 219 } 215 220 /*END FONT STYLING*/ 216 221

+1 -1

components/Blocks/TextBlock/index.tsx

··· 266 266 // unless we break *only* on urls, this is better than tailwind 'break-all' 267 267 // b/c break-all can cause breaks in the middle of words, but break-word still 268 268 // forces break if a single text string (e.g. a url) spans more than a full line 269 269 - style={{ wordBreak: "break-word" }} 269 269 + style={{ wordBreak: "break-word", fontFamily: props.type === "heading" ? "var(--theme-heading-font)" : "var(--theme-font)" }} 270 270 className={` 271 271 ${alignmentClass} 272 272 grow resize-none align-top whitespace-pre-wrap bg-transparent

+2 -4

components/FontLoader.tsx

··· 54 54 const headingFontValue = getFontFamilyValue(headingFont); 55 55 const bodyFontValue = getFontFamilyValue(bodyFont); 56 56 57 57 - // Generate CSS that sets the font family via CSS variables 58 58 - // --theme-font is used for body text (keeps backwards compatibility) 59 59 - // --theme-heading-font is used for headings 57 57 + // Set font CSS variables scoped to .leafletWrapper so they don't affect app UI 60 58 const fontVariableCSS = ` 61 61 - :root { 59 59 + .leafletWrapper { 62 60 --theme-heading-font: ${headingFontValue}; 63 61 --theme-font: ${bodyFontValue}; 64 62 }

+8

components/ThemeManager/Pickers/PageThemePickers.tsx

··· 21 21 import { ImageInput, ImageSettings } from "./ImagePicker"; 22 22 23 23 import { ColorPicker, thumbStyle } from "./ColorPicker"; 24 24 + import { FontPicker } from "./TextPickers"; 24 25 import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 25 26 import { Replicache } from "replicache"; 26 27 import { CanvasBackgroundPattern } from "components/Canvas"; ··· 31 32 entityID: string; 32 33 openPicker: pickers; 33 34 setOpenPicker: (thisPicker: pickers) => void; 35 35 + home?: boolean; 34 36 }) => { 35 37 let { rep } = useReplicache(); 36 38 let set = useMemo(() => { ··· 57 59 openPicker={props.openPicker} 58 60 setOpenPicker={props.setOpenPicker} 59 61 /> 62 62 + {!props.home && ( 63 63 + <> 64 64 + <FontPicker label="Heading" entityID={props.entityID} attribute="theme/heading-font" /> 65 65 + <FontPicker label="Body" entityID={props.entityID} attribute="theme/body-font" /> 66 66 + </> 67 67 + )} 60 68 </div> 61 69 ); 62 70 };

+2 -7

components/ThemeManager/ThemeProvider.tsx

··· 22 22 PublicationThemeProvider, 23 23 } from "./PublicationThemeProvider"; 24 24 import { getColorDifference } from "./themeUtils"; 25 25 - import { getFontConfig, getGoogleFontsUrl, getFontFamilyValue } from "src/fonts"; 25 25 + import { getFontConfig, getGoogleFontsUrl, getFontFamilyValue, generateFontFaceCSS } from "src/fonts"; 26 26 27 27 // define a function to set an Aria Color to a CSS Variable in RGB 28 28 function setCSSVariableToColor( ··· 277 277 (pageWidth || 624).toString(), 278 278 ); 279 279 280 280 - // Set theme font CSS variables 281 281 - el?.style.setProperty("--theme-heading-font", headingFontValue); 282 282 - el?.style.setProperty("--theme-font", bodyFontValue); 283 280 }, [ 284 281 local, 285 282 bgLeaflet, ··· 292 289 accent2, 293 290 accentContrast, 294 291 pageWidth, 295 295 - headingFontValue, 296 296 - bodyFontValue, 297 297 - ]); // bodyFontValue sets --theme-font 292 292 + ]); 298 293 return ( 299 294 <div 300 295 className="leafletWrapper w-full text-primary h-full min-h-fit flex flex-col bg-center items-stretch "

+1 -7

components/ThemeManager/ThemeSetter.tsx

··· 22 22 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 23 23 import { useIsMobile } from "src/hooks/isMobile"; 24 24 import { Toggle } from "components/Toggle"; 25 25 - import { FontPicker } from "./Pickers/TextPickers"; 26 25 27 26 export type pickers = 28 27 | "null" ··· 157 156 entityID={props.entityID} 158 157 openPicker={openPicker} 159 158 setOpenPicker={(pickers) => setOpenPicker(pickers)} 159 159 + home={props.home} 160 160 /> 161 161 - {!props.home && ( 162 162 - <div className="flex flex-col gap-1 bg-bg-page p-2 rounded-md border border-primary -mt-2"> 163 163 - <FontPicker label="Heading" entityID={props.entityID} attribute="theme/heading-font" /> 164 164 - <FontPicker label="Body" entityID={props.entityID} attribute="theme/body-font" /> 165 165 - </div> 166 166 - )} 167 161 <div className="flex flex-col -gap-[6px]"> 168 162 <div className={`flex flex-col z-10 -mb-[6px] `}> 169 163 <AccentPickers

public/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2

This is a binary file and will not be displayed.

public/fonts/AtkinsonHyperlegibleNext-Variable.woff2

This is a binary file and will not be displayed.

+3 -13

src/fonts.ts

··· 90 90 id: "atkinson-hyperlegible", 91 91 displayName: "Atkinson Hyperlegible", 92 92 fontFamily: "Atkinson Hyperlegible Next", 93 93 - type: "local", 94 94 - files: [ 95 95 - { 96 96 - path: "/fonts/AtkinsonHyperlegibleNext-Variable.woff2", 97 97 - style: "normal", 98 98 - weight: "200 800", 99 99 - }, 100 100 - { 101 101 - path: "/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2", 102 102 - style: "italic", 103 103 - weight: "200 800", 104 104 - }, 105 105 - ], 93 93 + type: "google", 94 94 + googleFontsFamily: 95 95 + "Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800", 106 96 fallback: ["system-ui", "sans-serif"], 107 97 }, 108 98 "space-mono": {