feat: replace Noto Sans with Josefin Sans as primary font

[IamLRBA]

Josefin Sans vs Noto Sans

Josefin Sans advantages:

• More distinctive and modern look
• Better visual hierarchy with clearer weight differences
• More personality and brand differentiation
• Works well for both headings and body text

Noto Sans characteristics:

• Very neutral and common
• Excellent for internationalization
• Less distinctive visually

Changes made:

• Imported Josefin Sans from Google Fonts
• Updated font family tokens to use Josefin Sans
• Applied Josefin Sans to all body text elements
• Preserved monospace fonts for code blocks

Screenshots:

Before:

After:

Bottom line: Josefin Sans gives our site a more unique, modern look while staying readable. Noto Sans is more universal but less distinctive.

If there are any suggestions of font styles we can use or keeping the current style, I am open to suggestions!

cc @Bahati308 @r0ssing @Ndacyayisenga-droid

[IamLRBA]

Before:

After:

[r0ssing]

Nice! I really like the distinctive new look!

One thing we could consider: it might be better to serve fonts directly from our server rather than via the Google Fonts API. Loading from Google means that each visitor’s browser sends a request to Google that includes their IP address, browser/device info, the font requested, and the URL of our site, so Google can infer that someone visited our website. Self-hosting the fonts avoids sending this data.

[Bahati308]

This is dope !

[IamLRBA]

Aaah! Thanks @r0ssing and I think I have understood your point,
I agree that self-hosting the fonts is better for privacy and avoids sending visitor data to Google.
Let me switch Josefin Sans to be self-hosted, I can:

• Download the Josefin Sans font files
• Add them to static/fonts/
• Update the CSS to use @font-face declarations
• Then remove the Google Fonts import
  I believe this will maintain the same look while improving privacy. Or do you have any other methods we can employ?

[r0ssing]

That would be a great solution!

[IamLRBA]

Hi @r0ssing, I've implemented the self-hosting approach. Here's what I did:

• Downloaded Josefin Sans font files - All required weights (300, 400, 500, 600) in WOFF2 format
• Added fonts to static/fonts/ - Fonts are now served directly from our server
• Updated CSS - Replaced the Google Fonts @import with @font-face declarations
• Removed old Noto Sans files - To clean up unused font files

The fonts are now self-hosted and the visual appearance remains exactly the same. No more external requests to Google Fonts, so visitor data is no longer sent to Google.

The implementation uses WOFF2 format for optimal performance and file size. All font weights are properly configured to match the previous setup.

Thanks for the suggestion! This is definitely a better approach for privacy. 🎉

[r0ssing]

Looks great! Thanks a lot for this!