Added custom fonts support (#362)

ref DES-971
TryGhost · Nov 14, 2024 · e47ae33 · e47ae33
1 parent 2e20807
commit e47ae33
Show file tree

Hide file tree

Showing 77 changed files with 306 additions and 280 deletions.
diff --git a/packages/_shared/assets/css/v1/components/article.css b/packages/_shared/assets/css/v1/components/article.css
@@ -10,8 +10,8 @@
     word-break: break-word;
 }
 
-.has-serif-title .gh-article-title {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-article-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
     letter-spacing: -0.01em;
 }
 
@@ -22,8 +22,8 @@
     color: var(--color-secondary-text);
 }
 
-.has-serif-body .gh-article-excerpt {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .gh-article-image {

diff --git a/packages/_shared/assets/css/v1/components/card.css b/packages/_shared/assets/css/v1/components/card.css
@@ -53,8 +53,8 @@ except for when immediately preceeded by a heading */
     font-weight: 700;
 }
 
-.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 /* Callout
@@ -87,12 +87,12 @@ blockquote.kg-blockquote-alt {
 /* Header
 /* ---------------------------------------------------------- */
 
-.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
-.has-serif-body .kg-header-card h3.kg-header-card-subheader {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-header-card h3.kg-header-card-subheader {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 /* Bookmark

diff --git a/packages/_shared/assets/css/v1/components/content.css b/packages/_shared/assets/css/v1/components/content.css
@@ -24,8 +24,8 @@ headings, text, images and lists. We deal with cards lower down. */
     margin-top: calc(2em * var(--content-spacing-multiplier, 1)) !important;
 }
 
-.has-serif-title .gh-content > [id] {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-content > [id] {
+    font-family: var(--gh-font-heading, var(--font-serif));
     letter-spacing: -0.01em;
 }
 
@@ -74,16 +74,16 @@ is the very first element in the post content */
     font-size: 0.95em;
 }
 
-.has-serif-body .gh-content > blockquote,
-.has-serif-body .gh-content > ol,
-.has-serif-body .gh-content > ul,
-.has-serif-body .gh-content > dl,
-.has-serif-body .gh-content > p,
-.has-serif-body .gh-content .kg-callout-text,
-.has-serif-body .gh-content .kg-toggle-content > ol,
-.has-serif-body .gh-content .kg-toggle-content > ul,
-.has-serif-body .gh-content .kg-toggle-content > p {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul,
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .gh-content ul,

diff --git a/packages/_shared/assets/css/v1/components/cover.css b/packages/_shared/assets/css/v1/components/cover.css
@@ -14,10 +14,10 @@
     height: 100%;
 }
 
-.has-serif-title .gh-cover-title {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-cover-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
-.has-serif-body .gh-cover-description {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-cover-description {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
diff --git a/packages/_shared/assets/css/v1/components/global.css b/packages/_shared/assets/css/v1/components/global.css
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-    font-family: var(--font-sans);
+    font-family: var(--gh-font-body, var(--font-sans));
     font-size: 1.6rem;
     line-height: 1.6;
     color: var(--color-primary-text);
@@ -31,6 +31,7 @@ h3,
 h4,
 h5,
 h6 {
+    font-family: var(--gh-font-heading, var(--font-sans));
     line-height: 1.15;
     color: var(--color-darker-gray);
     letter-spacing: -0.02em;

diff --git a/packages/_shared/assets/css/v1/components/header.css b/packages/_shared/assets/css/v1/components/header.css
@@ -23,6 +23,7 @@
 
 .gh-head-logo {
     position: relative;
+    font-family: var(--gh-font-heading, var(--font-sans));
     font-size: 2.4rem;
     font-weight: 700;
     letter-spacing: -0.02em;

diff --git a/packages/_shared/assets/css/v1/components/loop.css b/packages/_shared/assets/css/v1/components/loop.css
@@ -1,8 +1,8 @@
-.has-serif-title .gh-card-title {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-card-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
     letter-spacing: -0.01em;
 }
 
-.has-serif-body .gh-card-excerpt {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-excerpt {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
diff --git a/packages/_shared/assets/css/v2/components/cta.css b/packages/_shared/assets/css/v2/components/cta.css
@@ -15,8 +15,8 @@
     font-size: calc(clamp(2.4rem, 1.36vw + 1.85rem, 3.6rem) * var(--font-multiplier, 1));
 }
 
-.is-font-serif .gh-cta-title {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-cta-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-cta-input {

diff --git a/packages/_shared/assets/css/v2/components/footer.css b/packages/_shared/assets/css/v2/components/footer.css
@@ -5,8 +5,8 @@
     text-align: center;
 }
 
-.is-font-serif .gh-foot {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-foot {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .gh-foot-inner {

diff --git a/packages/_shared/assets/css/v2/components/header.css b/packages/_shared/assets/css/v2/components/header.css
@@ -28,8 +28,8 @@
     line-height: 1.2;
 }
 
-.is-font-serif .gh-header-primary {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header-primary {
+    font-family: var(--gh-font-heading, var(--font-serif));
     line-height: 1.1;
 }
 

diff --git a/packages/_shared/assets/css/v2/components/list.css b/packages/_shared/assets/css/v2/components/list.css
@@ -19,8 +19,8 @@
     font-size: calc(2.7rem * var(--font-multiplier, 1));
 }
 
-.is-font-serif .gh-list-title {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-list-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-list-item-inner {
@@ -41,8 +41,8 @@
     word-break: break-word;
 }
 
-.is-font-serif .gh-list-item-title {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-list-item-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-list-item-excerpt {

diff --git a/packages/_shared/assets/css/v2/components/navbar.css b/packages/_shared/assets/css/v2/components/navbar.css
@@ -2,8 +2,8 @@
     height: 100px;
 }
 
-.is-font-serif .gh-head {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-head {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-head-inner {
@@ -26,6 +26,7 @@
 
 .gh-head-logo {
     position: relative;
+    font-family: var(--gh-font-heading, var(--font-sans));
     font-size: calc(2.6rem * var(--font-multiplier, 1));
     font-weight: 700;
     letter-spacing: -0.02em;

diff --git a/packages/_shared/assets/css/v2/general/archive.css b/packages/_shared/assets/css/v2/general/archive.css
@@ -19,16 +19,16 @@
     font-size: calc(3.6rem * var(--font-multiplier, 1));
 }
 
-.is-font-serif .gh-archive-title {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-archive-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-archive-description {
     font-size: calc(1.7rem * var(--font-multiplier, 1));
 }
 
-.is-font-serif .gh-archive-description {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-archive-description {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .author-template .gh-archive-image {

diff --git a/packages/_shared/assets/css/v2/general/article.css b/packages/_shared/assets/css/v2/general/article.css
@@ -41,17 +41,17 @@
     word-break: break-word;
 }
 
-.is-font-serif .gh-article-title {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-article-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .gh-article-excerpt {
     margin-top: 24px;
     font-size: calc(1.8rem * var(--font-multiplier, 1));
 }
 
-.is-font-serif .gh-article-excerpt {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .gh-article-image {

diff --git a/packages/_shared/assets/css/v2/general/card.css b/packages/_shared/assets/css/v2/general/card.css
@@ -61,8 +61,8 @@ except for when immediately preceeded by a heading */
     font-weight: 700;
 }
 
-.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-toggle-card .kg-toggle-heading-text {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 /* Callout
@@ -100,12 +100,12 @@ blockquote.kg-blockquote-alt {
 /* Header
 /* ---------------------------------------------------------- */
 
-.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-card.kg-header-card h2.kg-header-card-header {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
-.has-serif-body .kg-header-card h3.kg-header-card-subheader {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-header-card h3.kg-header-card-subheader {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 /* Bookmark
@@ -160,10 +160,13 @@ blockquote.kg-blockquote-alt {
     margin-top: 12px;
 }
 
-.is-font-serif .kg-product-card.kg-card .kg-product-card-title,
-.is-font-serif .kg-product-card.kg-card .kg-product-card-description :is(p, ul, ol),
-.is-font-serif .kg-product-card.kg-card .kg-product-card-button {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .kg-product-card.kg-card .kg-product-card-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
+}
+
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-product-card.kg-card .kg-product-card-description :is(p, ul, ol),
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .kg-product-card.kg-card .kg-product-card-button {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 /* File

diff --git a/packages/_shared/assets/css/v2/general/content.css b/packages/_shared/assets/css/v2/general/content.css
@@ -24,8 +24,8 @@ headings, text, images and lists. We deal with cards lower down. */
     margin-top: calc(2em * var(--content-spacing-multiplier, 1)) !important;
 }
 
-.is-font-serif .gh-content > [id] {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-content > [id] {
+    font-family: var(--gh-font-heading, var(--font-serif));
     letter-spacing: -0.01em;
 }
 
@@ -78,16 +78,16 @@ is the very first element in the post content */
     font-size: 0.95em;
 }
 
-.is-font-serif .gh-content > blockquote,
-.is-font-serif .gh-content > ol,
-.is-font-serif .gh-content > ul,
-.is-font-serif .gh-content > dl,
-.is-font-serif .gh-content > p,
-.is-font-serif .gh-content .kg-callout-text,
-.is-font-serif .gh-content .kg-toggle-content > ol,
-.is-font-serif .gh-content .kg-toggle-content > ul,
-.is-font-serif .gh-content .kg-toggle-content > p {
-    font-family: var(--font-serif);
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul,
+.is-font-serif:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 .gh-content ul,

diff --git a/packages/_shared/assets/css/v2/general/global.css b/packages/_shared/assets/css/v2/general/global.css
@@ -31,7 +31,7 @@ html {
 }
 
 body {
-    font-family: var(--font-sans);
+    font-family: var(--gh-font-body, var(--font-sans));
     font-size: 1.6rem;
     line-height: 1.6;
     color: var(--color-primary-text);
@@ -54,6 +54,7 @@ a:hover {
 }
 
 :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--gh-font-heading, var(--font-sans));
     line-height: 1.2;
     color: var(--color-darker-gray);
     letter-spacing: -0.01em;

diff --git a/packages/alto/assets/built/screen.css b/packages/alto/assets/built/screen.css
diff --git a/packages/alto/assets/built/screen.css.map b/packages/alto/assets/built/screen.css.map
diff --git a/packages/alto/assets/css/blog/post.css b/packages/alto/assets/css/blog/post.css
@@ -42,8 +42,8 @@
     word-break: break-word;
 }
 
-.has-serif-title :where(.post-feed, .single-post) .post-title {
-    font-family: var(--font-serif);
+.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :where(.post-feed, .single-post) .post-title {
+    font-family: var(--gh-font-heading, var(--font-serif));
 }
 
 .post-meta {
@@ -69,8 +69,8 @@
     word-break: break-word;
 }
 
-.has-serif-body .post-excerpt {
-    font-family: var(--font-serif);
+.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .post-excerpt {
+    font-family: var(--gh-font-body, var(--font-serif));
 }
 
 @media (max-width: 767px) {

diff --git a/packages/bulletin/assets/built/screen.css b/packages/bulletin/assets/built/screen.css
diff --git a/packages/bulletin/assets/built/screen.css.map b/packages/bulletin/assets/built/screen.css.map