jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-18 19:05:31 -04:00
Code Issues Activity

fontsource -> next/font

Browse Source
This commit is contained in:
Jake Jarvis
2022-10-28 09:26:01 -04:00
parent 840e73b49a
commit 6520e6fa2e
11 changed files with 45 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff";
import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2";
import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";
export const name = {
regular: "Comic Neue",
};
export const preloads = [];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
},
];

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

@@ -1,59 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import interLatin400NormalWoff from "@fontsource/inter/files/inter-latin-400-normal.woff";
import interLatin400NormalWoff2 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
import interLatin500NormalWoff from "@fontsource/inter/files/inter-latin-500-normal.woff";
import interLatin500NormalWoff2 from "@fontsource/inter/files/inter-latin-500-normal.woff2";
import interLatin700NormalWoff from "@fontsource/inter/files/inter-latin-700-normal.woff";
import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
// Variable
import interLatinVarWghtOnlyNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-wghtOnly-normal.woff2";
// note: inter does have italics, of course, but google fonts has refused to add them.
// https://github.com/google/fonts/issues/2386
export const name = {
regular: "Inter",
variable: "Inter var",
};
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{
href: interLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 500,
src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
},
{
fontFamily: name.variable,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 900",
src: `url(${interLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
];

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

@@ -1,56 +0,0 @@
import type { AtRule } from "@stitches/react/types/css";
// Legacy
import robotoMonoLatin400NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff";
import robotoMonoLatin400NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2";
import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff";
import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
// Variable
import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
export const name = {
regular: "Roboto Mono",
variable: "Roboto Mono var",
};
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
export const preloads = [
{
href: robotoMonoLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
export const family: AtRule.FontFace[] = [
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 400,
src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 500,
src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
},
{
fontFamily: name.regular,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
},
{
fontFamily: name.variable,
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
];

3
lib/styles/fonts/index.ts
View File

@@ -1,3 +0,0 @@
export * as ComicNeue from "./ComicNeue";
export * as Inter from "./Inter";
export * as RobotoMono from "./RobotoMono";

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

@@ -6,7 +6,17 @@ import hexToRgba from "./utils/hex-to-rgba";
import normalizeStyles from "./utils/normalize";
// web fonts
import { Inter, RobotoMono } from "./fonts";
import { Inter, Roboto_Mono } from "@next/font/google";
export const inter = Inter({
weight: "variable",
display: "fallback",
preload: true,
});
export const robotoMono = Roboto_Mono({
weight: "variable",
display: "fallback",
preload: true,
});
// https://stitches.dev/docs/typescript#type-a-css-object
export type CSS = Stitches.CSS<typeof stitchesConfig>;
@@ -23,10 +33,8 @@ export const {
} = createStitches({
theme: {
fonts: {
sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
sansVar: `"${Inter.name.variable}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
mono: `"${RobotoMono.name.regular}", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
monoVar: `"${RobotoMono.name.variable}", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
sans: `${inter.style.fontFamily}, sans-serif`,
mono: `${robotoMono.style.fontFamily}, monospace`,
},
colors: {
@@ -138,25 +146,14 @@ export const globalStyles = globalCss(
// @ts-ignore
normalizeStyles,
{
"@font-face": [...Inter.family, ...RobotoMono.family],
body: {
fontFamily: theme.fonts.sans,
backgroundColor: theme.colors.backgroundInner,
transition: `background ${theme.transitions.fade}`,
// variable font support?
"@supports (font-variation-settings: normal)": {
fontFamily: theme.fonts.sansVar,
},
},
"code, kbd, samp, pre": {
fontFamily: theme.fonts.mono,
"@supports (font-variation-settings: normal)": {
fontFamily: theme.fonts.monoVar,
},
},
}
);