update fonts to Geist #2171
update fonts to Geist #2171
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR updates the font family from "Euclid Circular B" to "Geist" across the application's styling system. The change includes updating font-face declarations to use the new Geist font files in WOFF2 format and updating all CSS variable references throughout the codebase.
- Updates @font-face declarations to load Geist font variants instead of Euclid Circular B
- Replaces CSS variable name from
--font-mm-euclidto--font-mm-geist - Updates all font-family references across SCSS files to use the new Geist font
Reviewed Changes
Copilot reviewed 5 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/scss/theme/_fonts.scss | Updates @font-face declarations to load Geist font files instead of Euclid Circular B |
| src/scss/custom.scss | Updates CSS variable definition and references from euclid to geist |
| src/scss/commons/_typescale.scss | Updates font-primary class to use new geist variable |
| src/scss/app.scss | Updates base HTML font-family to use geist variable |
| src/components/ParserOpenRPC/global.module.scss | Updates component-specific font-family-sans variable to use Geist |
| font-style: normal; | ||
| font-weight: 400; | ||
| font-display: swap; | ||
| src: url('/fonts/EuclidCircularB/EuclidCircularB-Regular-WebXL.ttf') format('truetype'); | ||
| src: url('/fonts/Geist/Geist-Regular.woff2') format('woff2'); |
There was a problem hiding this comment.
Consider adding fallback font formats for better browser compatibility. While WOFF2 is modern and efficient, adding WOFF as a fallback would ensure support for older browsers that don't support WOFF2.
| src: url('/fonts/Geist/Geist-Regular.woff2') format('woff2'); | |
| src: url('/fonts/Geist/Geist-Regular.woff2') format('woff2'), | |
| url('/fonts/Geist/Geist-Regular.woff') format('woff'); |
Copilot uses AI. Check for mistakes.
| @@ -1,5 +1,5 @@ | |||
| .root { | |||
| --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif; | |||
| --font-family-sans: 'Geist', Arial, 'Helvetica Neue', Helvetica, sans-serif; | |||
There was a problem hiding this comment.
This component is defining its own font-family-sans variable instead of using the centralized --font-mm-geist variable. Consider using var(--font-mm-geist) to maintain consistency with the rest of the application and avoid duplicating font stack definitions.
| --font-family-sans: 'Geist', Arial, 'Helvetica Neue', Helvetica, sans-serif; | |
| --font-family-sans: var(--font-mm-geist); |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
LGTM! Nice work @AndyMBridges 💯
- Checked Geist fonts loaded correctly in browser ✅
- Checked for no remaining instances of Euclid in codebase ✅
There was a problem hiding this comment.
I'm noticing that:
- The monospace font we use for inline code-formatted text doesn't match/feel cohesive with this new theme font.
- The monospace font used for inline code-formatted text differs greatly from the monospace font used in code blocks.
Is there a matching monospace font that would fit better with Geist? Also, would it be ok to choose a single monospace font for inline code-formatted text and code samples? This would be more cohesive – see Google dev docs, for example.
Description
EuclidtoGeist