feat(dicty-frontpage): add fontsource-variable/inter-tight and fontso…

…urce-variable/playfair-display packages The commit adds the fontsource-variable/inter-tight and fontsource-variable/playfair-display packages to the project's dependencies. These packages provide additional font options for styling the application, enhancing the visual appeal and design flexibility.
dictyBase · Nov 28, 2024 · 5efd544 · 5efd544
1 parent 1752a94
commit 5efd544
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/apps/dicty-frontpage/package.json b/apps/dicty-frontpage/package.json
@@ -24,6 +24,8 @@
     "@dictybase/editor": "*",
     "@dictybase/google-analytics": "*",
     "@dictybase/ui-frontpage": "*",
+    "@fontsource-variable/inter-tight": "^5.1.0",
+    "@fontsource-variable/playfair-display": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",

diff --git a/apps/dicty-frontpage/src/app/layout/App.tsx b/apps/dicty-frontpage/src/app/layout/App.tsx
@@ -2,6 +2,8 @@ import { LogtoProvider, LogtoConfig, UserScope } from "@logto/react"
 import { CssBaseline } from "@material-ui/core"
 import { AppProviders } from "./AppProviders"
 import { FrontPageApp } from "./FrontPageApp"
+import "@fontsource-variable/playfair-display"
+import "@fontsource-variable/inter-tight"
 
 const logtoConfig: LogtoConfig = {
   endpoint: import.meta.env.VITE_LOGTO_ENDPOINT,

diff --git a/apps/dicty-frontpage/src/features/Publication/SinglePublication.tsx b/apps/dicty-frontpage/src/features/Publication/SinglePublication.tsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
   title: {
     fontWeight: 600,
     fontSize: "24px",
-    fontFamily: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+    fontFamily: "'Playfair Display Variable', serif",
   },
   publication: {
     color: grey[700],
@@ -64,12 +64,11 @@ const useStyles = makeStyles((theme) => ({
   abstractHeading: {
     fontWeight: 600,
     fontSize: "20px",
-    fontFamily: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+    fontFamily: "'Playfair Display Variable', serif",
   },
   abstract: {
     fontSize: "16px",
-    fontFamily:
-      "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    fontFamily: "'Inter Tight Variable', sans-serif",
     marginBottom: theme.spacing(2),
     color: blueGrey[900],
   },