mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-16 17:55:32 -04:00
hack around the google fonts vs. inter italics mess
This commit is contained in:
@@ -9,7 +9,10 @@ import interLatin700NormalWoff from "@fontsource/inter/files/inter-latin-700-nor
|
|||||||
import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
|
import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
|
||||||
|
|
||||||
// Variable
|
// Variable
|
||||||
import interLatinVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-full-normal.woff2";
|
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 = {
|
export const name = {
|
||||||
regular: "Inter",
|
regular: "Inter",
|
||||||
@@ -19,7 +22,7 @@ export const name = {
|
|||||||
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
|
// re-export hashed URL(s) of the most prominent files so we can preload them in `<head>` (see pages/_document.tsx):
|
||||||
export const preloads = [
|
export const preloads = [
|
||||||
{
|
{
|
||||||
href: interLatinVarFullNormalWoff2,
|
href: interLatinVarWghtOnlyNormalWoff2,
|
||||||
type: "font/woff2",
|
type: "font/woff2",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -48,9 +51,9 @@ export const family: AtRule.FontFace[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
fontFamily: name.variable,
|
fontFamily: name.variable,
|
||||||
fontStyle: "oblique 0deg 10deg",
|
fontStyle: "normal",
|
||||||
fontDisplay: "swap",
|
fontDisplay: "swap",
|
||||||
fontWeight: "100 900",
|
fontWeight: "100 900",
|
||||||
src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
|
src: `url(${interLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -144,34 +144,19 @@ export const globalStyles = globalCss(
|
|||||||
fontFamily: theme.fonts.sans,
|
fontFamily: theme.fonts.sans,
|
||||||
backgroundColor: theme.colors.backgroundInner,
|
backgroundColor: theme.colors.backgroundInner,
|
||||||
transition: `background ${theme.transitions.fade}`,
|
transition: `background ${theme.transitions.fade}`,
|
||||||
|
|
||||||
|
// variable font support?
|
||||||
|
"@supports (font-variation-settings: normal)": {
|
||||||
|
fontFamily: theme.fonts.sansVar,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
"code, kbd, samp, pre": {
|
"code, kbd, samp, pre": {
|
||||||
fontFamily: theme.fonts.mono,
|
fontFamily: theme.fonts.mono,
|
||||||
},
|
|
||||||
|
|
||||||
// variable font support?
|
"@supports (font-variation-settings: normal)": {
|
||||||
"@supports (font-variation-settings: normal)": {
|
|
||||||
body: {
|
|
||||||
fontFamily: theme.fonts.sansVar,
|
|
||||||
},
|
|
||||||
|
|
||||||
"code, kbd, samp, pre": {
|
|
||||||
fontFamily: theme.fonts.monoVar,
|
fontFamily: theme.fonts.monoVar,
|
||||||
},
|
},
|
||||||
|
|
||||||
// Chrome doesn't automatically slant multi-axis Inter var, for some reason.
|
|
||||||
// Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
|
|
||||||
em: {
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontVariationSettings: `"ital" 1, "slnt" -10`,
|
|
||||||
|
|
||||||
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
|
|
||||||
"& code, & kbd, & samp, & pre": {
|
|
||||||
fontStyle: "italic !important",
|
|
||||||
fontVariationSettings: "initial !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
700
package-lock.json
generated
700
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@@ -17,19 +17,19 @@
|
|||||||
"lint": "eslint . --ext js,jsx,ts,tsx,md,mdx"
|
"lint": "eslint . --ext js,jsx,ts,tsx,md,mdx"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/comic-neue": "4.5.9",
|
"@fontsource/comic-neue": "4.5.10",
|
||||||
"@fontsource/inter": "4.5.12",
|
"@fontsource/inter": "4.5.13",
|
||||||
"@fontsource/roboto-mono": "4.5.8",
|
"@fontsource/roboto-mono": "4.5.8",
|
||||||
"@giscus/react": "^2.2.0",
|
"@giscus/react": "^2.2.0",
|
||||||
"@hcaptcha/react-hcaptcha": "^1.4.4",
|
"@hcaptcha/react-hcaptcha": "^1.4.4",
|
||||||
"@novnc/novnc": "github:novnc/novnc#c101a31520aba083a85edcb2f3269a826471007a",
|
"@novnc/novnc": "github:novnc/novnc#c101a31520aba083a85edcb2f3269a826471007a",
|
||||||
"@octokit/graphql": "^5.0.1",
|
"@octokit/graphql": "^5.0.1",
|
||||||
"@octokit/graphql-schema": "^12.8.1",
|
"@octokit/graphql-schema": "^12.9.0",
|
||||||
"@primer/octicons": "^17.6.0",
|
"@primer/octicons": "^17.6.0",
|
||||||
"@prisma/client": "^4.4.0",
|
"@prisma/client": "^4.4.0",
|
||||||
"@react-spring/web": "^9.5.5",
|
"@react-spring/web": "^9.5.5",
|
||||||
"@sentry/node": "^7.14.0",
|
"@sentry/node": "^7.14.1",
|
||||||
"@sentry/tracing": "^7.14.0",
|
"@sentry/tracing": "^7.14.1",
|
||||||
"@stitches/react": "^1.2.8",
|
"@stitches/react": "^1.2.8",
|
||||||
"comma-number": "^2.1.0",
|
"comma-number": "^2.1.0",
|
||||||
"copy-to-clipboard": "^3.3.2",
|
"copy-to-clipboard": "^3.3.2",
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"hex-to-rgba": "^2.0.1",
|
"hex-to-rgba": "^2.0.1",
|
||||||
"marked": "^4.1.1",
|
"marked": "^4.1.1",
|
||||||
"next": "12.3.2-canary.16",
|
"next": "12.3.2-canary.17",
|
||||||
"next-mdx-remote": "^4.1.0",
|
"next-mdx-remote": "^4.1.0",
|
||||||
"next-seo": "^5.5.0",
|
"next-seo": "^5.5.0",
|
||||||
"obj-str": "^1.1.0",
|
"obj-str": "^1.1.0",
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
"remark-smartypants": "^2.0.0",
|
"remark-smartypants": "^2.0.0",
|
||||||
"remark-unwrap-images": "^3.0.1",
|
"remark-unwrap-images": "^3.0.1",
|
||||||
"remove-markdown": "^0.5.0",
|
"remove-markdown": "^0.5.0",
|
||||||
"simple-icons": "^7.13.0",
|
"simple-icons": "^7.14.0",
|
||||||
"sitemap": "^7.1.1",
|
"sitemap": "^7.1.1",
|
||||||
"swr": "^1.3.0"
|
"swr": "^1.3.0"
|
||||||
},
|
},
|
||||||
@@ -83,11 +83,11 @@
|
|||||||
"@types/react-is": "^17.0.3",
|
"@types/react-is": "^17.0.3",
|
||||||
"@types/remove-markdown": "^0.3.1",
|
"@types/remove-markdown": "^0.3.1",
|
||||||
"@types/uglify-js": "^3.17.0",
|
"@types/uglify-js": "^3.17.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.38.1",
|
"@typescript-eslint/eslint-plugin": "^5.39.0",
|
||||||
"@typescript-eslint/parser": "^5.38.1",
|
"@typescript-eslint/parser": "^5.39.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"eslint": "~8.24.0",
|
"eslint": "~8.24.0",
|
||||||
"eslint-config-next": "12.3.2-canary.16",
|
"eslint-config-next": "12.3.2-canary.17",
|
||||||
"eslint-config-prettier": "~8.5.0",
|
"eslint-config-prettier": "~8.5.0",
|
||||||
"eslint-plugin-mdx": "~2.0.5",
|
"eslint-plugin-mdx": "~2.0.5",
|
||||||
"eslint-plugin-prettier": "~4.2.1",
|
"eslint-plugin-prettier": "~4.2.1",
|
||||||
|
|||||||
Reference in New Issue
Block a user