feat: use nanum brush script font for headers (#239)

* feat: use nanum brush script font for headers * chore: skip cascadia font for reduced-data
Th3S4mur41 · Aug 17, 2021 · 5a02f66 · 5a02f66
1 parent d10ecc2
commit 5a02f66
Show file tree

Hide file tree

Showing 8 changed files with 21,880 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
 	"homepage": "https://th3s4mur41.me",
 	"dependencies": {
 		"@fontsource/cascadia-code": "^4.2.1",
+		"@fontsource/nanum-brush-script": "^4.5.0",
 		"postcss-preset-env": "^6.7.0"
 	},
 	"devDependencies": {

diff --git a/src/index.html b/src/index.html
@@ -22,7 +22,7 @@
 		<!-- Preload-->
 		<link
 			rel="preload"
-			href="~@fontsource/cascadia-code/files/cascadia-code-latin-ext-400-normal.woff2"
+			href="~@fontsource/nanum-brush-script/files/nanum-brush-script-latin-400-normal.woff2"
 			as="font"
 			type="font/woff2"
 			crossorigin

diff --git a/src/styles/elements/h.scss b/src/styles/elements/h.scss
@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: 'Nanum Brush Script', 'Nanum Brush Script-fallback';
+	font-weight: 600;
+}
+
+h1 {
+	font-size: clamp(3.5rem, 12vw, 10rem);
+}
diff --git a/src/styles/generic/global.scss b/src/styles/generic/global.scss
@@ -10,7 +10,7 @@ body {
 
 body {
 	font-size: var(--default-font-size);
-	font-family: 'Cascadia Code', monospace;
+	font-family: monospace;
 	background-color: var(--primary-background-color);
 	color: var(--primary-color);
 	accent-color: var(--theme-color);

diff --git a/src/styles/generic/layout.scss b/src/styles/generic/layout.scss
@@ -31,7 +31,6 @@ body {
 	align-items: center;
 	gap: 0.5em;
 	margin-block: 1em;
-	font-size: clamp(2rem, 8vw, 5rem);
 	color: var(--theme-color);
 	text-shadow: 0.1rem 0.1rem 0.2rem var(--primary-background-color);
 
@@ -41,7 +40,6 @@ body {
 	}
 	> h1 {
 		margin: 0;
-		font-size: inherit;
 	}
 }
 

diff --git a/src/styles/settings/fonts.scss b/src/styles/settings/fonts.scss
@@ -1,7 +1,18 @@
-@import '~@fontsource/cascadia-code/index.css';
+@import '~@fontsource/nanum-brush-script/latin.css';
+
+@media (prefers-redduced-data: no-preference) {
+	@import '~@fontsource/cascadia-code/index.css';
+}
+
+@font-face {
+	font-family: 'Nanum Brush Script-fallback';
+	size-adjust: 75.32000000000005%;
+	ascent-override: 126%;
+	src: local('Arial');
+}
 
 @font-face {
-	font-family: 'monospace';
+	font-family: 'Cascadia Code-fallback';
 	advance-override: 0.0375; // stylelint-disable-line property-no-unknown
 	src: local('monospace');
 }

diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -20,6 +20,7 @@
 
 /* Elements */
 @import 'elements/a.scss';
+@import 'elements/h.scss';
 @import 'elements/svg.scss';
 
 /* Components */