Font size extremely small and not proportionate

[xshreesh]

[torn4dom4n]

I have a same issue. It works when I build the site on Gatsby Cloud but doesn't work with GitHub page.
BTW, I use Gatsby v5.0.1 and the theme v5.

[LekoArts]

You'll need to give more details than a screenshot. https://minimal-blog.lekoarts.de/ is working fine

[LekoArts]

When e.g. looking at the heading in the footer, it gets this CSS:

<style data-emotion="css 1c4kh09">
    .css-1c4kh09 {
        font-family: inherit;
        font-weight: 700;
        line-height: 1.25;
        margin: 0;
        margin-bottom: 0.25rem;
        font-size: 3px;
        margin-top: 0.5rem;
        color: var(--theme-ui-colors-heading);
        font-family: inherit;
        font-weight: 700;
        line-height: 1.25;
        margin: 0;
        margin-bottom: 0.25rem;
        font-size: 3px;
        margin-top: 0.5rem;
        color: var(--theme-ui-colors-heading);
    }

    @media screen and (min-width: 640px) {
        .css-1c4kh09 {
            font-size:4px;
        }
    }

    @media screen and (min-width: 640px) {
        .css-1c4kh09 {
            font-size:4px;
        }
    }
</style>

But the theme doesn't define that at all. I don't understand why your site deploy on GitHub actions does have that 🤷

[ghost]

I have same issue in gatsby-starter-portfolio-cara. The font's are way too small. @LekoArts

[shirgoldbird]

Also running into this issue with this starter. Fresh install of the Cara starter with Gatsby 5.0.0.

[LekoArts]

So for example in the emilia theme the fontSizes are defined with numbers:

gatsby-themes/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js

Lines 84 to 106 in 7ff2d6f

	h1: {
	fontSize: [4, 5],
	mt: 2,
	color: `heading`,
	},
	h2: {
	fontSize: [3, 4],
	mt: 2,
	color: `heading`,
	},
	h3: {
	fontSize: [2, 3],
	mt: 3,
	color: `heading`,
	},
	h4: {
	fontSize: [1, 2],
	color: `heading`,
	},
	h5: {
	fontSize: 1,
	color: `heading`,
	},

This is exactly how it's supposed to work: https://theme-ui.com/guides/responsive-typography

So h1 has 5 at largest media query. The CSS has 5px so for some reason in your case the 5 doesn't get replaced with the proper Theme UI value but with 5px.

But no idea why it happens 🤷

[ghost]

In gatsby-starter-portfolio-cara, The CSS of your hosted site and manually developed sites using readme file are different. you can check yourself. @LekoArts

[LekoArts]

This should be fixed now. Delete your node_modules and lock file, re-install again.

[shirgoldbird]

Fixed for me! Thank you very very much.

[ghost]

It is fixed. thank you @LekoArts