jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 19:45:33 -04:00
Code Issues Activity

font preloading logic

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-27 12:36:58 -04:00
parent 090842a3bb
commit 804e88b7f9
6 changed files with 77 additions and 37 deletions
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 = { export const name = {
regular: "Comic Neue", 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[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, fontFamily: name.regular,

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

@@ -16,7 +16,13 @@ export const name = {
variable: "Inter var", variable: "Inter var",
}; };
// re-export hashed URL(s) of the most prominent file so we can preload it in head: // 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[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, fontFamily: name.regular,

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

@@ -23,7 +23,13 @@ export const name = {
variable: "Roboto Mono var", variable: "Roboto Mono var",
}; };
// re-export hashed URL(s) of the most prominent file so we can preload it in head: // 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[] = [ export const family: AtRule.FontFace[] = [
{ {
fontFamily: name.regular, 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 // 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 { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript/ThemeScript"; 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"; import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document // https://nextjs.org/docs/advanced-features/custom-document
@@ -12,13 +12,13 @@ const Document = () => {
<ThemeScript /> <ThemeScript />
{/* preload highest priority fonts defined in ../lib/styles/fonts/ */} {/* preload highest priority fonts defined in ../lib/styles/fonts/ */}
{preloadUrls.map((relativeUrl, index) => ( {preloadFonts.map((font) => (
<link <link
key={`font-${index}`} key={`font-${font.key}`}
rel="preload" rel="preload"
as="font" as="font"
type="font/woff2" type={font.type}
href={relativeUrl} href={font.src}
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
))} ))}

74
pages/previously.tsx
View File

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