jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 09:25:22 -04:00
Code Issues

font preloading logic

Browse Source
This commit is contained in:
Jake Jarvis 2022-05-27 12:36:58 -04:00
parent 090842a3bb
commit 804e88b7f9
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
6 changed files with 77 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/styles/fonts/ComicNeue.ts
View File

@ -13,6 +13,18 @@ import comicNeueLatin700ItalicWoff2 from "@fontsource/comic-neue/files/comic-neu
export const name = {
regular: "Comic Neue",
};
export const preloadFonts = [
{
key: "comic-neue-400",
src: comicNeueLatin400NormalWoff2,
type: "font/woff2",
},
{
key: "comic-neue-700",
src: comicNeueLatin700NormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

8
lib/styles/fonts/Inter.ts
View File

@ -16,7 +16,13 @@ export const name = {
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 preloadFonts = [
{
key: "inter-var",
src: interLatinVarFullNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

8
lib/styles/fonts/RobotoMono.ts
View File

@ -23,7 +23,13 @@ export const name = {
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 preloadFonts = [
{
key: "roboto-mono-var",
src: robotoMonoLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,

2
lib/styles/stitches.config.ts
View File

@ -161,4 +161,4 @@ export const globalStyles = globalCss(
);
// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls];
export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts];

10
pages/_document.tsx
View File

@ -1,6 +1,6 @@
import { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript/ThemeScript";
import { getCssText, preloadUrls } from "../lib/styles/stitches.config";
import { getCssText, preloadFonts } from "../lib/styles/stitches.config";
import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document
@ -12,13 +12,13 @@ const Document = () => {
<ThemeScript />
{/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
{preloadUrls.map((relativeUrl, index) => (
{preloadFonts.map((font) => (
<link
key={`font-${index}`}
key={`font-${font.key}`}
rel="preload"
as="font"
type="font/woff2"
href={relativeUrl}
type={font.type}
href={font.src}
crossOrigin="anonymous"
/>
))}

74
pages/previously.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable camelcase */
import Head from "next/head";
import { NextSeo } from "next-seo";
import Layout from "../components/Layout";
import Content from "../components/Content";
@ -200,42 +201,57 @@ Previously.getLayout = (page: ReactElement) => {
})();
return (
<Layout
css={{
fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
fontWeight: 600,
<>
<Head>
{ComicNeue.preloadFonts.map((font) => (
<link
key={`font-${font.key}`}
rel="preload"
as="font"
type={font.type}
href={font.src}
crossOrigin="anonymous"
/>
))}
</Head>
"& em": {
fontStyle: "revert !important",
},
<Layout
css={{
fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
fontWeight: 600,
"& header": {
// title text
"& > nav > a:first-of-type > span:last-of-type": {
fontSize: "1.4em",
fontWeight: 700,
"& em": {
fontStyle: "revert !important",
},
// menu item text
"& > nav > ul > li > a > span": {
"& header": {
// title text
"& > nav > a:first-of-type > span:last-of-type": {
fontSize: "1.4em",
fontWeight: 700,
},
// menu item text
"& > nav > ul > li > a > span": {
fontSize: "1.1em",
fontWeight: 700,
lineHeight: 1.1,
},
},
"& main > div > div": {
fontSize: "1.1em",
fontWeight: 700,
lineHeight: 1.1,
textAlign: "center",
},
},
"& main > div > div": {
fontSize: "1.1em",
textAlign: "center",
},
"& footer > div": {
fontSize: "0.95em",
},
}}
>
{page}
</Layout>
"& footer > div": {
fontSize: "0.95em",
},
}}
>
{page}
</Layout>
</>
);
};