pj/margin
1
0 Fork 0
mirror of https://github.com/priyanshujain/margin.git synced 2026-10-03 11:37:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(fonts): apply per-book body and heading fonts on screen

Browse Source 
Split heading typography onto a new --font-heading token and set both
--font-book and --font-heading from the active book's fonts when it
opens or its setup changes. Declare @font-face for the new bundled
fonts.
This commit is contained in:
pj committed 2026-06-22 14:19:01 -04:00
1 parent 124c1947c1
commit 28367b6670
5 files changed
+101 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/app.css
+14 -5
View File
@@ -427,6 +427,7 @@ body.resizing {
}
.chapter-title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 31px;
line-height: 1.16;
@@ -434,6 +435,10 @@ body.resizing {
margin: 15px 0 0;
}
.prose :is(h1, h2, h3) {
font-family: var(--font-heading);
}
.prose p {
font-size: 19px;
line-height: 1.68;
@@ -565,11 +570,15 @@ body.resizing {
}
.page .p-title {
font-family: var(--font-book);
font-family: var(--font-heading);
font-size: 12px;
margin-top: 5px;
}
.page :is(h2, h3) {
font-family: var(--font-heading);
}
.page p {
font-family: var(--font-book);
font-size: 6.6px;
@@ -620,7 +629,7 @@ body.resizing {
border: 0;
background: transparent;
text-align: center;
font-family: var(--font-book);
font-family: var(--font-heading);
font-weight: 500;
font-size: 31px;
line-height: 1.16;
@@ -1432,7 +1441,7 @@ body.resizing {
}
.cover-title {
font-family: var(--font-book);
font-family: var(--font-heading);
font-weight: 500;
font-size: 9.5cqw;
line-height: 1.08;
@@ -2108,7 +2117,7 @@ body.resizing {
}
.device-title {
font-family: var(--font-book);
font-family: var(--font-heading);
font-weight: 500;
font-size: calc(24 * var(--dv-scale));
line-height: 1.2;
@@ -2138,7 +2147,7 @@ body.resizing {
.device-body h1,
.device-body h2,
.device-body h3 {
font-family: var(--font-book);
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.25;
margin: 1.2em 0 0.5em;
src/styles/fonts.css
+64
View File
@@ -29,3 +29,67 @@
font-style: italic;
font-display: block;
}
@font-face {
font-family: "EB Garamond";
src: url("/fonts/EBGaramond-VF.ttf") format("truetype-variations");
font-weight: 400 800;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "EB Garamond";
src: url("/fonts/EBGaramond-Italic-VF.ttf") format("truetype-variations");
font-weight: 400 800;
font-style: italic;
font-display: block;
}
@font-face {
font-family: "Lora";
src: url("/fonts/Lora-VF.ttf") format("truetype-variations");
font-weight: 400 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Lora";
src: url("/fonts/Lora-Italic-VF.ttf") format("truetype-variations");
font-weight: 400 700;
font-style: italic;
font-display: block;
}
@font-face {
font-family: "Source Serif 4";
src: url("/fonts/SourceSerif4-VF.ttf") format("truetype-variations");
font-weight: 200 900;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Source Serif 4";
src: url("/fonts/SourceSerif4-Italic-VF.ttf") format("truetype-variations");
font-weight: 200 900;
font-style: italic;
font-display: block;
}
@font-face {
font-family: "Fraunces";
src: url("/fonts/Fraunces-VF.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Fraunces";
src: url("/fonts/Fraunces-Italic-VF.ttf") format("truetype-variations");
font-weight: 100 900;
font-style: italic;
font-display: block;
}
src/styles/tokens.css
+1
View File
@@ -1,6 +1,7 @@
:root {
--font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-book: "Literata", Georgia, "Times New Roman", serif;
--font-heading: "Literata", Georgia, "Times New Roman", serif;
--r-sm: 5px;
--r-md: 8px;