jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 11:18:30 -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 = { 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"
/> />
))} ))}

16
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,6 +201,20 @@ Previously.getLayout = (page: ReactElement) => {
})(); })();
return ( return (
<>
<Head>
{ComicNeue.preloadFonts.map((font) => (
<link
key={`font-${font.key}`}
rel="preload"
as="font"
type={font.type}
href={font.src}
crossOrigin="anonymous"
/>
))}
</Head>
<Layout <Layout
css={{ css={{
fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif', fontFamily: '"Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif',
@ -236,6 +251,7 @@ Previously.getLayout = (page: ReactElement) => {
> >
{page} {page}
</Layout> </Layout>
</>
); );
}; };