search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

The package doesn't actually import the "Inter" font #236

Closed vladoyoung closed 3 months ago

vladoyoung commented 3 months ago

Describe the bug We tried playing around with the fonts today and I think we found out that the "Inter" font is not included in the library and is not imported in any way. A colleague of mine and I tested this, he has the "Inter" font locally, I don't. We both played around with the CSS on our site, and the Reshaped site, and removing Inter, from the CSS for fonts (Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif) has different effects on our computers.

To Reproduce Unfortunately I can't edit the index.html file in the codesandbox, so I can't add the font in the <head> to show the difference.

Expected behavior The font to be imported with the package. Not dependant on the user local fonts. Or specifying this to the users somewhere so they know to take care of the importing themselves.

Screenshots The first video shows the effects of changing css values when I've imported the font through Google, in the <head> tag.

https://github.com/formaat-design/reshaped/assets/9999658/b6aafe79-39cb-4a2c-924f-8f01db55d17d

The second video shows the effects of changing the css values when the font is not imported

https://github.com/formaat-design/reshaped/assets/9999658/5b954c3e-918f-4e6f-ae93-ceb25d8e3fd3

You can see how the fonts fall back to the next ones i have locally, which are default on a mac. This will be different on other operating systems.

Environment (please complete the following information):

Additional context This should be a hotfix in my opinion. Let me know if you need more feedback or help testing.

vladoyoung commented 3 months ago

I found out I can actually put the fonts in the codesandbox, but can't really tweak the css values like I can on the videos attached above.

blvdmitry commented 3 months ago

You're right, we're not importing it by default since different frameworks might provide different ways of working with the fonts. There is a short paragraph about that but I think there should be more explanation of the topic there: https://reshaped.so/docs/getting-started/react/installation#using-fonts. Going to improve that for the next release.

I'm also waiting for this PR to be merged to get an easier integration with Next.js: https://github.com/vercel/next.js/pull/53608

vladoyoung commented 3 months ago

Ahhh sorry, I didn't see that paragraph at all. I think that is sufficient on letting users know that they need to take care of it themselves!

blvdmitry commented 3 months ago

Updated the doc structure a bit for the next release to make it more visible on the page and in the anchor menu