reorganize style and font configs

2025-07-17 15:25:30 -04:00 · 2022-04-20 11:19:02 -04:00
parent c2a5f6c94c
commit 54c662c1f2
15 changed files with 23 additions and 34 deletions
--- a/lib/styles/fonts/ComicNeue.ts
+++ b/lib/styles/fonts/ComicNeue.ts
@@ -0,0 +1,25 @@
+// Legacy
+import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff";
+import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2";
+import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
+import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";
+
+export const name = {
+  regular: "Comic Neue",
+};
+export const family = [
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 400,
+    src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 700,
+    src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
+  },
+];
--- a/lib/styles/fonts/Inter.ts
+++ b/lib/styles/fonts/Inter.ts
@@ -0,0 +1,47 @@
+// Legacy
+import interLatin400NormalWoff from "@fontsource/inter/files/inter-latin-400-normal.woff";
+import interLatin400NormalWoff2 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
+import interLatin500NormalWoff from "@fontsource/inter/files/inter-latin-500-normal.woff";
+import interLatin500NormalWoff2 from "@fontsource/inter/files/inter-latin-500-normal.woff2";
+import interLatin700NormalWoff from "@fontsource/inter/files/inter-latin-700-normal.woff";
+import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
+
+// Variable
+import interLatinVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-full-normal.woff2";
+
+export const name = {
+  regular: "Inter",
+  variable: "Inter var",
+};
+// re-export hashed URL(s) of the most prominent file so we can preload it in head:
+export const preloadUrls = [interLatinVarFullNormalWoff2];
+export const family = [
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 400,
+    src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 500,
+    src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 700,
+    src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.variable,
+    fontStyle: "oblique 0deg 10deg",
+    fontDisplay: "swap",
+    fontWeight: "100 900",
+    src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
+  },
+];
--- a/lib/styles/fonts/RobotoMono.ts
+++ b/lib/styles/fonts/RobotoMono.ts
@@ -0,0 +1,82 @@
+// Legacy
+import robotoMonoLatin400NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff";
+import robotoMonoLatin400NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2";
+import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff";
+import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
+import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
+import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
+import robotoMonoLatin400ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff";
+import robotoMonoLatin400ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff2";
+import robotoMonoLatin500ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff";
+import robotoMonoLatin500ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff2";
+import robotoMonoLatin700ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff";
+import robotoMonoLatin700ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff2";
+
+// Variable
+import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
+import robotoMonoLatinVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-italic.woff2";
+
+export const name = {
+  regular: "Roboto Mono",
+  variable: "Roboto Mono var",
+};
+// re-export hashed URL(s) of the most prominent file so we can preload it in head:
+export const preloadUrls = [robotoMonoLatinVarWghtOnlyNormalWoff2];
+export const family = [
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 400,
+    src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 500,
+    src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: 700,
+    src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "italic",
+    fontDisplay: "swap",
+    fontWeight: 400,
+    src: `url(${robotoMonoLatin400ItalicWoff2}) format("woff2"), url(${robotoMonoLatin400ItalicWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "italic",
+    fontDisplay: "swap",
+    fontWeight: 500,
+    src: `url(${robotoMonoLatin500ItalicWoff2}) format("woff2"), url(${robotoMonoLatin500ItalicWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.regular,
+    fontStyle: "italic",
+    fontDisplay: "swap",
+    fontWeight: 700,
+    src: `url(${robotoMonoLatin700ItalicWoff2}) format("woff2"), url(${robotoMonoLatin700ItalicWoff}) format("woff")`,
+  },
+  {
+    fontFamily: name.variable,
+    fontStyle: "normal",
+    fontDisplay: "swap",
+    fontWeight: "100 700",
+    src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
+  },
+  {
+    fontFamily: name.variable,
+    fontStyle: "italic",
+    fontDisplay: "swap",
+    fontWeight: "100 700",
+    src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
+  },
+];
--- a/lib/styles/fonts/index.ts
+++ b/lib/styles/fonts/index.ts
@@ -0,0 +1,3 @@
+export * as ComicNeue from "./ComicNeue";
+export * as Inter from "./Inter";
+export * as RobotoMono from "./RobotoMono";