Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid Property Value with Google Fonts #26

Open
KiARC opened this issue Aug 11, 2024 · 2 comments
Open

Invalid Property Value with Google Fonts #26

KiARC opened this issue Aug 11, 2024 · 2 comments

Comments

@KiARC
Copy link

KiARC commented Aug 11, 2024

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
Copy link
Author

KiARC commented Aug 11, 2024

I found a solution! Changing this:

name: 'Press Start 2P',

to this:

name: 'Press_Start_2P',

Fixes the issue. This should probably either be documented somewhere, or automatically fixed (i.e. the plugin could replace spaces with underscores when generating CSS)

@rishi-raj-jain
Copy link
Owner

Thanks for reporting this! Yes, I need to update this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants