Testing tailwind option to load fonts and made the cover images loadi…

…ng lazy.
framedsc · Dec 27, 2023 · bd24897 · bd24897
1 parent a60f8d2
commit bd24897
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 2 deletions.
diff --git a/components/home/year-cover.tsx b/components/home/year-cover.tsx
@@ -151,7 +151,7 @@ export function YearCover(year: number) {
   function imageElement(imageURL: string, shouldDisplay: boolean) {
     return (
       <div className="shot-wrapper" style={{ ...coverImageStyle, position: 'absolute', opacity: shouldDisplay ? 1 : 0, transition: 'opacity 0.5s' }}>
-        <img src={imageURL} style={coverImageStyle} />
+        <img src={imageURL} loading="lazy" style={coverImageStyle} />
       </div>
     );
   }

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,7 @@ import "../styles/globals.scss";
 import type { AppProps } from "next/app";
 import { Footer, Navigation } from "@components/global";
 import Head from "next/head";
-import '../public/fonts/stylesheet.css';
+//import '../public/fonts/stylesheet.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -6,6 +6,125 @@
 
 //@import "/fonts/stylesheet.css";
 
+@font-face {
+  font-family: "GalanoGrotesque";
+  font-style: normal;
+  font-weight: normal;
+  src: url("/fonts/Galano-Grotesque/GalanoGrotesque-Bold.woff2") format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt (Numbers)";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Italic.woff") format("woff");
+font-weight: normal;
+font-style: italic;
+font-display: swap;
+unicode-range: U+30-39; /* affects only 0-9 */
+ascent-override: 50%; /* necessary for line-height matching, not necessary to be 50% - not supported on safari! */
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt (Numbers)";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
+font-weight: normal;
+font-style: normal;
+font-display: swap;
+unicode-range: U+30-39;
+ascent-override: 50%;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt (Numbers)";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff");
+font-weight: bold;
+font-style: normal;
+font-display: swap;
+unicode-range: U+30-39;
+ascent-override: 50%;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt (Numbers)";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
+font-weight: bold;
+font-style: italic;
+font-display: swap;
+unicode-range: U+30-39;
+ascent-override: 50%;
+}
+
+
+@font-face {
+font-family: "AtkinsonHyperlegible";
+src: local("☞Atkinson Hyperlegible"), local("AtkinsonHyperlegible-Regular"),
+    url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff2") format("woff2"),
+    url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Regular.woff") format("woff");
+font-weight: normal;
+font-style: normal;
+font-display: swap;
+}
+
+@font-face {
+font-family: "AtkinsonHyperlegible";
+src: local("☞Atkinson Hyperlegible"), local("AtkinsonHyperlegible-Bold"),
+    url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff2") format("woff2"),
+    url("/fonts/Atkinson-Hyperlegible/AtkinsonHyperlegible-Bold.woff") format("woff");
+font-weight: bold;
+font-style: normal;
+font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Regular.woff") format("woff");
+font-weight: normal;
+font-style: normal;
+font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-Medium.woff") format("woff");
+font-weight: 500;
+font-style: normal;
+font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-MediumItalic.woff") format("woff");
+font-weight: 500;
+font-style: italic;
+font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBoldItalic.woff") format("woff");
+font-weight: 600;
+font-style: italic;
+font-display: swap;
+}
+
+@font-face {
+font-family: "Galano Grotesque Alt";
+src: url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff2") format("woff2"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.woff") format("woff"),
+     url("/fonts/Galano-Grotesque/GalanoGrotesqueAlt-SemiBold.ttf") format("truetype");
+font-weight: 600;
+font-style: normal;
+font-display: swap;
+}
+
 // Main site style
 h1, h2, h3, h4, h5, h6 {
   //margin-top: 0;