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

hack around the google fonts vs. inter italics mess

Browse Source
This commit is contained in:
Jake Jarvis
2022-10-04 07:25:12 -04:00
parent 8f355922fd
commit b64795ae57
4 changed files with 373 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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";
// 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 = {
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):
export const preloads = [
{
href: interLatinVarFullNormalWoff2,
href: interLatinVarWghtOnlyNormalWoff2,
type: "font/woff2",
},
];
@@ -48,9 +51,9 @@ export const family: AtRule.FontFace[] = [
},
{
fontFamily: name.variable,
fontStyle: "oblique 0deg 10deg",
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 900",
src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
src: `url(${interLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
];

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

@@ -144,34 +144,19 @@ export const globalStyles = globalCss(
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,
},
// variable font support?
"@supports (font-variation-settings: normal)": {
body: {
fontFamily: theme.fonts.sansVar,
},
"code, kbd, samp, pre": {
"@supports (font-variation-settings: normal)": {
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",
},
},
},
}
);