astro-font icon indicating copy to clipboard operation
astro-font copied to clipboard

Published 20 hours ago • verified publisher icon rishi-raj-jain

Invalid Property Value with Google Fonts

Open KiARC opened this issue 6 months ago • 2 comments

I'm trying to load a Google Fonts font with Astro Font:

<head>
	<!-- snip -->
	<AstroFont
		config={[
			{
				src: [],
				name: 'Press Start 2P',
				googleFontsURL: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
				preload: true,
				display: 'swap',
				selector: 'body',
				fallback: 'sans-serif',
			},
		]}
	/>
</head>

This appears to produce the following CSS, which Firefox flags as an "Invalid Property Value". The font does not render correctly.

body {
        font-family: Press Start 2P, '_font_fallback_1107014354668', sans-serif;
}

Adding single quotes around Press Start 2P in the CSS seems to fix the "Invalid Property Value" warning, but doesn't fix the rendering.

KiARC avatar Aug 11 '24 14:08 KiARC