fonts not rendering - Githubissues

rcpch / digital-growth-charts-react-component-library

A typescript React library for displaying RCPCH Digital Growth Charts from API data

https://growth.rcpch.ac.uk

MIT License

8 stars 11 forks source link

fonts not rendering #100

Closed eatyourpeas closed 2 months ago

eatyourpeas commented 3 months ago

The Montserrat and Arial fonts are being correctly bundled into the build folder but are not being found by the style sheets / styled components.

mbarton commented 2 months ago

Paired on this 29/08/24. It looks like we were referring to the fonts via src: url(...) but when running from the Vite build in https://github.com/rcpch/digital-growth-charts-react-client it doesn't know to serve the fonts from the library so ends up returning the SPA build by default.

We need the library to load the fonts. We discussed:

Loading Montserrat from the Google CDN and not trying to embed any fonts at all
Don't embed Arial, reference it directly with a standard sans-serif fallback chain for non Windows machines
Embed the fonts but use data urls so we can embed them within the library bundle
Use the Font Loading API to load them from a bundle within the library

eatyourpeas commented 2 months ago

@dmc-cambric Dan I think finally the easiest way to fix your font problem is to put this in your client:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

The fonts are bundled into the client too but serving them in a react app is not that easy. Let me know if this is possible.

dmc-cambric commented 2 months ago

@eatyourpeas This would be ideal, however our app needs to be able to function offline, so we can't always guarantee access to the google font sites. Not entirely sure what the best way forward is here, if these embedded fonts can't be accessed or if they are loaded from a url in the rcpch package, we would probably need to serve those same static font files, just from within our app.

eatyourpeas commented 2 months ago

This now fixed with #104 Note that montserrat only is bundled into the library, not Arial that is standard on most windows computers. If there specific requests for fonts those will need to be added to the bundle as b64 files. Best for people to raise and issue with this request in future.

@dmc-cambric do please let me know that this fixes your fonts issue