Bold and very small text looks fuzzy - html

Question

Recently when using Serif font I have been having this problem where the text looks very fuzzy and not sharp.
What i've tried:
filter: blur(0.000001px);
-webkit-font-smoothing: antialiased;
I am using, Crimson Text from google fonts. On the preview it looks perfectly fine but when I put it in my site its all fuzzy.
I have looked for solutions everywhere but to no avail, any help would be greatly appreciated
EDIT :
Here is the problematic file I presume.
export const TopicCycleWrapper = styled.div`
height: 80vh;
max-width: 50%;
display: flex;
flex-direction: column;
/* align-items: left; */
justify-content: center;
/* display: inline-block;
margin-top: 13%; */
/* -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
`;
export const InnerWrapper = styled.div`
display: inline-block;
`;
export const Primary = styled((props) => <Link {...props} />)`
font-weight: ${(props) => props.theme.weight.bold};
font-size: 80px;
color: ${(props) => props.theme.colors.primary};
transition: 0.3s ease;
text-decoration: none;
&:hover,
&:focus {
color: #414141;
}
`;
export const Secondary = styled.span`
font-size: 60px;
color: ${(props) => props.theme.colors.secondary};
cursor: pointer;
`;
export const Desc = styled.p`
font-size: 20px;
`;
Here is my theme.js
export const light = {
fonts: { main: "Crimson Text, serif", code: "Roboto Mono, monospaced" },
colors: {
// theme === "dark" ? "test" : "no",
main1: "#4d9ee0",
main2: "#e5f1fa",
dark1: "#1e1e1f",
dark2: "#414244",
dark3: "#a1a2a5",
light1: "#F9FAFB", //f7f7f7
light2: "#fcfcfc",
primary: "#000",
secondary: "#C8C8C8",
},
breakpoints: {
mobile: "only screen and (max-width: 50rem)",
tablet: "only screen and (max-width: 65rem)",
},
spacings: {
xxSmall: ".25rem",
xSmall: ".5rem",
small: "1rem",
medium: "2rem",
large: "3rem",
xLarge: "4rem",
xxLarge: "6rem",
},
weight: {
regular: "400",
semiBold: "600",
bold: "700",
black: "900",
},
animations: { button: "box-shadow 0.3s ease", link: "color 0.2s ease" },
shadows: { shadow: "0px 5px 20px rgba(30,30,31,0.05)" },
};
I am also using gatsby-plugin-google-fonts, I'm not sure if this is contributing to the problem
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`roboto mono`,
`Crimson Text\:400, 400i, 600, 600i, 700, 700i, 900`, // you can also specify font weights and styles
],
display: "swap",
},
},