Skip to content

Conversation

@jose-blockchain
Copy link

Description:

Problem:
The website was using the Lato font throughout, but the brand guidelines specify that Sailic should be used for larger text/headings and Inter should be used for body text. This inconsistency with the brand identity needed to be corrected (issue #660).

Solution:

  • Replaced all instances of Lato font with the correct brand fonts:
    • Inter for body text, smaller text elements, and general content
    • Sailic for larger text, headings (h4), and prominent display text
  • Updated Google Fonts import in base.html to load Sailic and Inter
  • Added sans-serif fallbacks to all font declarations to ensure graceful degradation if fonts fail to load
  • Updated 31 files total including:
    • CSS files (main stylesheet, page-specific, and component styles)
    • HTML templates
    • Email templates (with proper fallbacks for email client compatibility)
    • SVG files (with appropriate font assignments based on text size)

Why this solution is better:

  • Aligns the website with brand guidelines
  • Maintains visual consistency across all pages
  • Includes proper fallbacks to prevent UI breakage
  • Email templates remain compatible with clients that don't support web fonts
  • No breaking changes - fonts are swapped with equivalent weights and styles

Checklist:

  • Test your work and double-check to confirm that you didn't break anything
    • Verified all Lato references removed (except in text content like "regulatory")
    • Confirmed all font declarations include proper sans-serif fallbacks
    • Checked Google Fonts URL formatting is correct
    • Verified email template compatibility with fallback fonts
    • Tested that fonts load correctly and fallbacks work as expected
  • Update the README, if necessary
    • No README updates needed - this is a styling change that doesn't affect setup or usage
  • Run translation commands if any strings are changed
    • No translatable strings were changed - only font-family CSS declarations and font imports were modified

Related Issue

Closes #660

- Replace Lato with Inter for body text and smaller elements
- Replace Lato with Sailic for larger text and headings
- Update Google Fonts import in base.html
- Update all CSS files, HTML templates, email templates, and SVG files
- Fixes issue OriginProtocol#660
- Add sans-serif fallback to all Inter and Sailic font-family declarations
- Ensures proper fallback if fonts fail to load
- Prevents UI breaking when fonts are unavailable
@jose-blockchain
Copy link
Author

please review @DanielVF @nick @ryana @andrewhyde @matt-bullock if still needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Incorrect font being used on Origin protocol website

1 participant