text looks bad

[redreceipt]

Problem Statement

Linear issue PR Branch Name: apo-206-battlecreek-web-embed-displaying-broken-text

Sometimes text looks really bad

Resolution Criteria

• [ ] Text looks good

How to reproduce

• Go here: https://battlecreekchurch.webflow.io/
• Click "Family Reunion Part 2"

Screenshots/Recordings

https://github.com/ApollosProject/apollos-embeds/assets/2659478/255522f5-aa9d-476e-9370-8c2fa36f7f83

[rajitharussel]

@redreceipt I was trying to recreate this issue but looks like this is not originally from this repo. here are the observations

these are the styles that caused to issue. the first one is from our side added here >

https://github.com/ApollosProject/apollos-embeds/blob/f6249035149c7ddc41b24291cf00e0fc5986705e/packages/web-shared/ui-kit/Longform/Longform.styles.js#L21

as you can see they have overridden the font size but the new line-height won't apply because they haven't used the !important key. so I applied it from the browser and now it works.

so this can be fixed from the CSS file coming from here.

https://cdn.prod.website-files.com/66350c65ca55dcf714ea2d03/css/battlecreekchurch.webflow.bce7e345f.css

[rajitharussel]

@redreceipt we can close this right?