Optional bundled fonts (fixes #44). Style cleanups

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `--dim-opacity` CSS variable for setting opacity of dimmed elements.
 - Add `--disabled-opacity` CSS variable for setting opacity of disabled elements.
 - Add `--hover` CSS variable for setting zoom on hover.
+- Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system.
 - Add `external` class to comment timestamp.
 - Add `h1` with page/section title by default.
 - Add active state to footer's "Powered by" links.
@@ -42,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow opening original comment attachment by clicking on it.
 - Allow overriding the `body` block of `base.html.
 - Allow statements on all sections except for the homepage.
+- Change font sizes to [absolute sizes](https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size).
 - Change the way 404 image is resized (#74).
 - Improved CRT style, now looks a lot more like [cool-retro-term](https://github.com/Swordfish90/cool-retro-term).
 - Make comment timestamp more subtle.
@@ -51,11 +53,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reduce the target heading transition time.
 - Reduce top margin of the target heading.
 - Remove bottom margin of `:last-child` and not `:last-of-type`.
+- Remove legacy KaTeX font variants.
 - Rewrite the homepage (#75).
 - Set animation/transition duration to 0s with `prefers-reduced-motion' instead of removing them altogether.
 - Set socials icons as CSS variables and not inline styles.
 - Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
 - Tweak `kbd` styling.
+- Tweak margins instead of relying on `line-height`.
 - Tweak padding of verified instance badge.
 - Use more fitting cursors in some contexts.
 - Use PNG instead of GIF for comments QR code to reduce download size.

config.toml

@@ -76,6 +76,11 @@ accent_color_dark = "#ffa348"
 #
 # Ditto but for the dark theme.
 fix_contrast_dark = true
+# Whether to use fonts bundled with Duckquill instead of system ones.
+# Keep in mind that it also changes the style of headings.
+#
+# bundled_fonts = true
+#
 # Use emoji as a favicon.
 # Only one emoji is being rendered, everything else is truncated.
 #

content/demo/index.md

@@ -505,7 +505,7 @@ With `range` type:
 <abbr title="American Standard Code for Information Interchange">ASCII</abbr>
 ```
 
-The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
+The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art is awesome!
 
 ### Aside (`<aside>`)
 

content/demo/page.md

@@ -2,8 +2,6 @@
 title = "Cake Party"
 +++
 
-# Welcome to the cake party
-
 <img class="transparent no-hover" style="width: min(calc(var(--container-width) / 2), 100%)" src="https://i1.theportalwiki.net/img/0/0a/Portal_Cake.png"/>
 
 Sadly, the cake is a _lie_

content/tricks/index.md

@@ -171,8 +171,12 @@ Don't like that fancy horizontal rule? Let's make it more modern:
 
 ```scss
 hr {
-    border-block-start: 0.25rem solid var(--fg-muted-2);
+	box-shadow: var(--edge-highlight);
+	border: none;
+	border-radius: 999px;
+	background-color: var(--fg-muted-2);
 	width: 50%;
+	height: 0.25rem;
 
     &::after {
         display: none;

sass/_article-list.scss

@@ -237,10 +237,9 @@
 			display: inline-block;
 			box-shadow: var(--edge-highlight);
 			border-radius: 999px;
-			padding: 0.5rem 0.75rem;
+			padding: 0.375rem 0.75rem;
 			height: fit-content;
 			font-weight: bold;
-			line-height: 1.25;
 			white-space: nowrap;
 
 			.icon {
@@ -315,10 +314,6 @@
 			margin-block-start: 1rem;
 			border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
 			padding-block-start: 0.5rem;
-
-			small {
-				line-height: 1.25;
-			}
 		}
 	}
 }

sass/_buttons.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	align-items: baseline;
 	margin-block-start: 4rem;
 }
 
@@ -25,11 +24,10 @@ button.inline-button {
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
 	background-color: var(--fg-muted-1);
-	padding: 0.75rem 1rem;
+	padding: 0.5rem 1rem;
 	color: var(--fg-muted-5);
 	font-weight: bold;
-	font-size: 0.875rem;
+	font-size: smaller;
-	line-height: 1;
 
 	&:hover {
 		background-color: var(--fg-muted-2);

sass/_code.scss

@@ -12,7 +12,7 @@ code:not(pre code) {
 	background-color: var(--fg-muted-1);
 	padding: 0.125rem 0.375rem;
 	color: var(--red-fg);
-	font-size: 0.875em;
+	font-size: smaller;
 }
 
 pre {
@@ -23,7 +23,7 @@ pre {
 	padding: 1rem;
 	max-width: 100vw;
 	overflow: auto;
-	line-height: 1.25;
+	line-height: normal;
 
 	table {
 		box-shadow: none;

sass/_comments.scss

@@ -64,7 +64,7 @@
 			margin-block-start: 0;
 			color: var(--fg-muted-4);
 			font-weight: bold;
-			font-size: 1.5em;
+			font-size: x-large;
 			text-align: center;
 		}
 
@@ -123,10 +123,9 @@
 					box-shadow: var(--edge-highlight);
 					border-radius: 999px;
 					background-color: var(--fg-muted-1);
-					padding: 0.375rem 0.75rem;
+					padding: 0.25rem 0.75rem;
 					color: var(--fg-muted-5);
-					font-size: 0.875rem;
+					font-size: smaller;
-					line-height: 1;
 					text-decoration: none;
 
 					&:hover {
@@ -194,7 +193,7 @@
 				border-radius: var(--rounded-corner-small);
 				background-color: var(--accent-color-alpha);
 				padding: 0.125rem 0.375rem;
-				line-height: 1.25;
+				line-height: normal;
 				text-decoration: none;
 
 				&:hover {
@@ -221,8 +220,7 @@
 			time {
 				grid-area: time;
 				margin-block-start: 0.5rem;
-				font-size: 0.875rem;
+				font-size: smaller;
-				line-height: 1.25;
 
 				a {
 					color: var(--fg-muted-5);
@@ -270,7 +268,7 @@
 					transition: var(--transition);
 					border-radius: 999px;
 					background-color: transparent;
-					padding: 0.25rem 0.75rem;
+					padding: 0.375rem 0.75rem;
 					font-variant-numeric: tabular-nums;
 					text-decoration: none;
 

sass/_footer.scss

@@ -24,7 +24,8 @@
 
 		li {
 			display: flex;
-			line-height: 1.25;
+			margin: 0;
+			padding: 0;
 			list-style: none;
 
 			@media only screen and (max-width: 480px) {
@@ -36,9 +37,8 @@
 			flex: 1;
 			transition: var(--transition);
 			border-radius: 999px;
-			padding: 0.5rem 0.75rem;
+			padding: 0.375rem 0.75rem;
 			color: var(--fg-muted-4);
-			line-height: 1.25;
 			text-align: center;
 			text-decoration: none;
 
@@ -74,7 +74,8 @@
 		padding: 0;
 
 		li {
-			line-height: 0;
+			margin: 0;
+			padding: 0;
 			list-style: none;
 		}
 
@@ -113,7 +114,6 @@
 
 	p {
 		margin: 1rem auto;
-		line-height: 1.25;
 	}
 
 	.link {

sass/_general.scss

@@ -6,7 +6,6 @@
 	scroll-behavior: smooth;
 	scrollbar-color: var(--accent-color) transparent;
 	accent-color: var(--accent-color);
-	font-size: 16px;
 
 	// Smaller font size on mobile
 	// @media only screen and (max-width: 480px) {
@@ -22,7 +21,7 @@ body {
 	background-color: var(--bg-color);
 	min-height: 100vh;
 	color: var(--fg-color);
-	line-height: 1.6;
+	line-height: 1.5;
 	font-family: var(--font-system-ui), var(--font-emoji);
 	overflow-wrap: break-word;
 }

sass/_icon.scss

@@ -3,6 +3,6 @@
 	mask-size: cover;
 	font-style: normal;
 	font-variant: normal;
-	line-height: 1;
+	line-height: 0;
 	text-rendering: auto;
 }

sass/_nav.scss

@@ -32,9 +32,8 @@
 				0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
 			border-radius: 999px;
 			background-color: var(--nav-bg);
-			padding: 0.5rem 0.75rem;
+			padding: 0.375rem 0.75rem;
 			pointer-events: none;
-			line-height: 1.25;
 			text-decoration: none;
 
 			&:focus {
@@ -55,7 +54,8 @@
 
 		li {
 			display: flex;
-			line-height: 1.25;
+			margin: 0;
+			padding: 0;
 			list-style: none;
 
 			@media only screen and (max-width: 480px) {
@@ -71,10 +71,9 @@
 			transition: var(--transition);
 			border-radius: 999px;
 			background-color: transparent;
-			padding: 0.5rem 0.75rem;
+			padding: 0.375rem 0.75rem;
 			color: var(--fg-muted-4);
 			font-weight: bold;
-			line-height: 1.25;
 			list-style: none;
 			text-align: center;
 			text-decoration: none;
@@ -171,7 +170,7 @@
 		}
 
 		.circle {
-			padding: 0.5rem 0.625rem;
+			padding: 0.375rem 0.625rem;
 
 			.icon {
 				vertical-align: -0.125em;
@@ -409,7 +408,7 @@
 			padding: 0.5rem;
 
 			a {
-				line-height: 1.25;
+				width: fit-content;
 
 				&::after {
 					content: " →";

sass/_post-nav.scss

@@ -7,7 +7,7 @@
 		flex: 1 1 0;
 		transition: var(--transition);
 		border-radius: var(--rounded-corner);
-		padding: 1rem;
+		padding: 0.75rem 1rem;
 		width: 0;
 		max-width: calc(50% - 0.125rem);
 		text-decoration: none;
@@ -50,7 +50,6 @@
 			margin-block-end: 0.5rem;
 			color: var(--fg-muted-5);
 			font-weight: normal;
-			line-height: 1.25;
 		}
 
 		.post-title {
@@ -58,7 +57,6 @@
 			transition: var(--transition);
 			overflow: hidden;
 			color: var(--fg-color);
-			line-height: 1.25;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}

sass/_pre-container.scss

@@ -16,7 +16,6 @@
 			margin-inline-start: 0.75rem;
 			color: var(--fg-muted-5);
 			font-weight: bold;
-			line-height: 1.25;
 		}
 
 		button {

sass/_statements.scss

@@ -1,17 +1,19 @@
 .statement-container {
-	margin: 1rem 0 1rem;
+	margin: 1rem 0;
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
-	padding: 1rem 1rem 0.5rem;
+	padding: 0.75rem 1rem;
 
-	* {
+	:last-child {
-		margin: 0;
+		margin-block-end: 0;
 	}
 
-	p,
+	& > :nth-child(2) {
-	ul,
+		margin-block-start: 0.5rem;
-	ol {
+	}
-		margin: 0.5rem 0 0.5rem;
+
+	li::marker {
+		color: inherit;
 	}
 
 	a {
@@ -19,8 +21,7 @@
 	}
 
 	.big {
-		font-size: 1.5rem;
+		font-size: x-large;
-		line-height: 1.25;
 
 		.icon {
 			margin-inline-end: 0.375rem;

sass/_tags.scss

@@ -9,7 +9,8 @@
 	li {
 		display: inline-flex;
 		transition: var(--transition);
-		line-height: 1;
+		margin: 0;
+		padding: 0;
 
 		&:active {
 			transform: var(--active);
@@ -21,9 +22,9 @@
 		box-shadow: var(--edge-highlight);
 		border-radius: 999px;
 		background-color: var(--fg-muted-1);
-		padding: 0.375rem 0.75rem;
+		padding: 0.2031rem 0.75rem;
 		color: var(--fg-muted-5);
-		font-size: 0.875rem;
+		font-size: small;
 		text-decoration: none;
 		white-space: nowrap;
 

sass/_typography.scss

@@ -8,7 +8,6 @@ h6 {
 	text-wrap: balance;
 	margin: 2rem 0 1rem;
 	font-weight: lighter;
-	line-height: 1.25;
 	font-family: var(--font-antique);
 	letter-spacing: -0.05em;
 }
@@ -25,9 +24,21 @@ h3 {
 	font-size: 1.5rem;
 }
 
+h4 {
+	font-size: 1.25rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+h6 {
+	font-size: 0.75rem;
+}
+
 small {
 	color: var(--fg-muted-5);
-	font-size: 0.875em;
+	font-size: smaller;
 }
 
 abbr[title] {
@@ -42,7 +53,7 @@ abbr[title] {
 
 figcaption {
 	color: var(--fg-muted-4);
-	font-size: 0.875em;
+	font-size: smaller;
 	text-align: center;
 }
 
@@ -86,7 +97,7 @@ ins {
 samp {
 	background-color: var(--fg-muted-1);
 	color: var(--fg-muted-5);
-	font-size: 0.875em;
+	font-size: smaller;
 }
 
 q {
@@ -141,9 +152,8 @@ kbd {
 	box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2);
 	border-radius: var(--rounded-corner-small);
 	background-color: var(--fg-muted-1);
-	padding: 0.25rem 0.375rem;
+	padding: 0.125rem 0.375rem;
-	font-size: 0.875em;
+	font-size: smaller;
-	line-height: 1;
 
 	&:hover {
 		cursor: pointer;
@@ -193,6 +203,7 @@ dt {
 }
 
 dd {
+	margin-inline-start: 1.5rem;
 	margin-block-end: 1rem;
 }
 
@@ -222,13 +233,9 @@ details {
 	background-color: var(--fg-muted-1);
 	padding: 1rem;
 
-	summary {
+	summary:hover {
-		line-height: 1.25;
-
-		&:hover {
 		cursor: pointer;
 	}
-	}
 
 	:last-child {
 		margin-block-end: 0;
@@ -238,3 +245,18 @@ details {
 figure {
 	margin-inline: 0;
 }
+
+ol,
+ul {
+	padding-inline-start: 1.5rem;
+}
+
+li {
+	margin: 0.125rem 0;
+	padding-inline-start: 0.25rem;
+
+	&::marker {
+		color: var(--accent-color);
+		font-weight: bold;
+	}
+}

sass/fonts.scss

@@ -0,0 +1,56 @@
+@font-face {
+	font-style: normal;
+	font-weight: 100 900;
+	src: url("fonts/InterVariable.woff2") format("woff2");
+	font-family: "Inter Variable";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: italic;
+	font-weight: 100 900;
+	src: url("fonts/InterVariable-Italic.woff2") format("woff2");
+	font-family: "Inter Variable";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: normal;
+	font-weight: 100 900;
+	src: url("fonts/JetBrainsMono.woff2") format("woff2");
+	font-family: "JetBrains Mono";
+	font-display: swap;
+}
+
+@font-face {
+	font-style: italic;
+	font-weight: 100 900;
+	src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
+	font-family: "JetBrains Mono";
+	font-display: swap;
+}
+
+body {
+	font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: bold;
+	font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
+}
+
+h1 {
+	font-weight: 900;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: "JetBrains Mono", var(--font-monospace-code);
+}

static/katex.css

@@ -1,121 +1,121 @@
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
 @font-face {
   font-family: "KaTeX_AMS";
-  src: url(fonts/KaTeX_AMS-Regular.woff2) format("woff2"), url(fonts/KaTeX_AMS-Regular.woff) format("woff"), url(fonts/KaTeX_AMS-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_AMS-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Caligraphic";
-  src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"), url(fonts/KaTeX_Caligraphic-Bold.woff) format("woff"), url(fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
+  src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Caligraphic";
-  src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"), url(fonts/KaTeX_Caligraphic-Regular.woff) format("woff"), url(fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Fraktur";
-  src: url(fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"), url(fonts/KaTeX_Fraktur-Bold.woff) format("woff"), url(fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
+  src: url(fonts/KaTeX_Fraktur-Bold.woff2) format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Fraktur";
-  src: url(fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"), url(fonts/KaTeX_Fraktur-Regular.woff) format("woff"), url(fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Fraktur-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Main";
-  src: url(fonts/KaTeX_Main-Bold.woff2) format("woff2"), url(fonts/KaTeX_Main-Bold.woff) format("woff"), url(fonts/KaTeX_Main-Bold.ttf) format("truetype");
+  src: url(fonts/KaTeX_Main-Bold.woff2) format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Main";
-  src: url(fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"), url(fonts/KaTeX_Main-BoldItalic.woff) format("woff"), url(fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
+  src: url(fonts/KaTeX_Main-BoldItalic.woff2) format("woff2");
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
   font-family: "KaTeX_Main";
-  src: url(fonts/KaTeX_Main-Italic.woff2) format("woff2"), url(fonts/KaTeX_Main-Italic.woff) format("woff"), url(fonts/KaTeX_Main-Italic.ttf) format("truetype");
+  src: url(fonts/KaTeX_Main-Italic.woff2) format("woff2");
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: "KaTeX_Main";
-  src: url(fonts/KaTeX_Main-Regular.woff2) format("woff2"), url(fonts/KaTeX_Main-Regular.woff) format("woff"), url(fonts/KaTeX_Main-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Main-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Math";
-  src: url(fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"), url(fonts/KaTeX_Math-BoldItalic.woff) format("woff"), url(fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
+  src: url(fonts/KaTeX_Math-BoldItalic.woff2) format("woff2");
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
   font-family: "KaTeX_Math";
-  src: url(fonts/KaTeX_Math-Italic.woff2) format("woff2"), url(fonts/KaTeX_Math-Italic.woff) format("woff"), url(fonts/KaTeX_Math-Italic.ttf) format("truetype");
+  src: url(fonts/KaTeX_Math-Italic.woff2) format("woff2");
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: "KaTeX_SansSerif";
-  src: url(fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"), url(fonts/KaTeX_SansSerif-Bold.woff) format("woff"), url(fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
+  src: url(fonts/KaTeX_SansSerif-Bold.woff2) format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_SansSerif";
-  src: url(fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"), url(fonts/KaTeX_SansSerif-Italic.woff) format("woff"), url(fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
+  src: url(fonts/KaTeX_SansSerif-Italic.woff2) format("woff2");
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: "KaTeX_SansSerif";
-  src: url(fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"), url(fonts/KaTeX_SansSerif-Regular.woff) format("woff"), url(fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_SansSerif-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Script";
-  src: url(fonts/KaTeX_Script-Regular.woff2) format("woff2"), url(fonts/KaTeX_Script-Regular.woff) format("woff"), url(fonts/KaTeX_Script-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Script-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Size1";
-  src: url(fonts/KaTeX_Size1-Regular.woff2) format("woff2"), url(fonts/KaTeX_Size1-Regular.woff) format("woff"), url(fonts/KaTeX_Size1-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Size1-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Size2";
-  src: url(fonts/KaTeX_Size2-Regular.woff2) format("woff2"), url(fonts/KaTeX_Size2-Regular.woff) format("woff"), url(fonts/KaTeX_Size2-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Size2-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Size3";
-  src: url(fonts/KaTeX_Size3-Regular.woff2) format("woff2"), url(fonts/KaTeX_Size3-Regular.woff) format("woff"), url(fonts/KaTeX_Size3-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Size3-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Size4";
-  src: url(fonts/KaTeX_Size4-Regular.woff2) format("woff2"), url(fonts/KaTeX_Size4-Regular.woff) format("woff"), url(fonts/KaTeX_Size4-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Size4-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "KaTeX_Typewriter";
-  src: url(fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"), url(fonts/KaTeX_Typewriter-Regular.woff) format("woff"), url(fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
+  src: url(fonts/KaTeX_Typewriter-Regular.woff2) format("woff2");
   font-weight: normal;
   font-style: normal;
 }

templates/article.html

@@ -73,6 +73,7 @@
 {%- endif -%}
 
 <div class="dialog-buttons">
+	{# <a class="no-hover inline-button colored external" href="https://shareopenly.org/share/?url={{ page.permalink }}&text={{ page.description | urlencode }}">{{ macros_translate::translate(key="share", default="Share", language_strings=language_strings) }}</a> #}
 	<a class="inline-button" href="#top">{{ macros_translate::translate(key="go_to_top", default="Go to Top", language_strings=language_strings) }}</a>
 	{%- if config.extra.issues_url -%}
 		<a class="inline-button colored external" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}">

templates/partials/head.html

@@ -79,6 +79,10 @@
 
 	{%- set styles = [ "style.css" ] %}
 
+	{%- if config.extra.bundled_fonts %}
+		{%- set styles = styles | concat(with=["fonts.css"]) %}
+	{%- endif %}
+
 	{%- if config.extra.katex %}
 		{%- set styles = styles | concat(with=["katex.css"]) %}
 	{%- endif %}