Optimize fonts (preload, remove unused "National" font from preload)

the-pudding · Nov 7, 2024 · 75388b6 · 75388b6
1 parent 6d77d6a
commit 75388b6
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/src/components/viz/LoveSongChangeTinyAnnotation.svelte b/src/components/viz/LoveSongChangeTinyAnnotation.svelte
@@ -22,7 +22,7 @@
         position: fixed;
         transform: translateY(-100%) translateX(-50%);
 
-        font-family: 'Atlas Grotesk', sans-serif;
+        font-family: var(--sans);
         font-size: 12px;
 
         list-style-type: none;

diff --git a/src/components/viz/LoveSongTypeLabel.svelte b/src/components/viz/LoveSongTypeLabel.svelte
@@ -64,7 +64,7 @@
 
 <style>
 	li {
-		font-family: 'Atlas Grotesk', sans-serif;
+		font-family: var(--sans);
 		position: fixed;
 		display: flex;
 		align-items: center;

diff --git a/src/components/viz/TotalLoveSongPercentageAnnotation.svelte b/src/components/viz/TotalLoveSongPercentageAnnotation.svelte
@@ -21,7 +21,7 @@
         position: fixed;
         transform: translateY(-100%);
 
-        font-family: 'Atlas Grotesk', sans-serif;
+        font-family: var(--sans);
         font-weight: bold;
 
         list-style-type: none;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -13,8 +13,8 @@
 	const preloadFont = [
 		"https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Regular.woff2",
 		"https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Bold.woff2",
-		"https://pudding.cool/assets/fonts/national/National2Web-Regular.woff2",
-		"https://pudding.cool/assets/fonts/national/National2Web-Bold.woff2"
+		"https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2",
+		"https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2"
 	];
 
 	const { title, description, url, keywords } = copy;

diff --git a/src/styles/font.css b/src/styles/font.css
@@ -1,16 +1,18 @@
-/* National */
+/* Atlas Grotesk */
 @font-face {
-	font-family: "National 2 Web";
-	src: url("https://pudding.cool/assets/fonts/national/National2Web-Regular.woff2") format("woff2");
+	font-family: "Atlas Grotesk";
+	src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2")
+		format("woff2");
 	font-weight: 400;
 	font-style: normal;
 	font-stretch: normal;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: "National 2 Web";
-	src: url("https://pudding.cool/assets/fonts/national/National2Web-Bold.woff2") format("woff2");
+	font-family: "Atlas Grotesk";
+	src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2")
+		format("woff2");
 	font-weight: 700;
 	font-style: normal;
 	font-stretch: normal;