♻️ Changed font family from "Open Sans" to "Inter"

[babakamyljanovssw]

Relates to #1600

Change font family from "Open Sans" to "Inter"

[tiagov8]

@JackDevAU is correct!

We could embed: https://fonts.google.com/selection/embed

OR self-host: https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts
(I believe this is recommended)

More info: https://www.capitalnumbers.com/blog/self-hosting-vs-google-fonts/

• 1. Please confirm how Open Sans was implemented (if self-host it's a no-brainer)
• 2. Implement Inter as per the documentation above

[babakamyljanovssw]

cc: @JackDevAU
Hi @tiagov8

1. Please confirm how Open Sans was implemented (if self-host it's a no-brainer)

I couldn't find any code that Open Sans was added as self-host, or as embedded link. But in the dev-tools I noticed that Open Sans came with tailwindcss

2. Implement Inter as per the documentation above

As per gatsby documentation using web fonts as self-host (recommended option) - https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource

• I added @fontsource/inter package
• Imported Inter styles import '@fontsource/inter'; in gatsby-browser.js
• Then changed font-family of html tag from Open Sans to Inter in styles.css

Figure: Current SSW.Rules with Open Sans font

Figure: SSW. Rules with Inter font