body on kit-site is missing font 'Overpass'

[vedam]

Just noticed this while reading the kit-docs.

So the body on kit-site looks like:

While on the svelte-site we have the 'Overpass' as body-font:

[benmccann]

The SvelteKit site has a line that's not present on the svelte.dev site:

sites/packages/site-kit/base.css

Line 63 in 766775d

--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,

The svelte.dev site for reference:

https://github.com/sveltejs/site-kit/blob/01d83baee868053b01b560bc92ee34967616113f/base.css#L61

It looks like @Rich-Harris added this in 2f03e65

[benmccann]

Removing the extra line make it choose a better looking font, but totally screws up the font sizing, so it'll take some tweaking

[vedam]

Removing the extra line make it choose a better looking font, but totally screws up the font sizing, so it'll take some tweaking

I think the extra line is because the custom property --fontisn't defined elsewhere. (i.e. :root, .theme-default or .typo-default)
I made the base of this css-structure long ago (around svelte 3 upcoming) to my best knowledge.
In the meantime I had to recognized on my personal homepage (using similar techniques) that there seems to be something wrong with the font-shortcut using css-vars (line 139). I guess this is responsible for screwing up font-sizing.

I was able to work around that with either:

/* using a fixed value for line-height – not really what I wanted */
body {
	font: 300 var(--h4)/1.5 var(--font);
	...
}

... or splitting the font-shortcut:

body {
	font-family: var(--font);
	font-size: var(--h4);
	line-height: var(--lh);
	font-weight: 300;
	...
}

[vedam]

😳 Where can I create issues for bugs in css?

[saitheninja]

Hi

I think I figured out the problem.

kit.svelte.dev has base.css, line 138:
font: 400 var(--h4) / var(--lh) var(--font-body);

The matching style from svelte.dev:
font: 300 var(--h4) / var(--lh) var(--font);

--font-body is used for body tag. All other css uses --font. Changing it to match seems to fix without screwing up sizing.

svelte.dev is using site-kit 1.4.0, which is why it has not been affected.
package.json