Apply Outfit font globally across frontend #174
Conversation
📝 WalkthroughWalkthroughUpdates global typography to Outfit: normalizes DOCTYPE, adds Google Fonts preconnects and stylesheet to the HTML head, sets body margin and font-family to Outfit in CSS, and extends Tailwind's sans fontFamily to include Outfit. No app logic or scripts were changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks✅ Passed checks (5 passed)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/index.html (1)
4-9: Consider optimizing font weight loading to match actual usage.The codebase currently uses font weights 400 (normal), 500 (medium), 600 (semibold), 700 (bold), and 800 (extrabold). Loading the full variable font range (100-900) includes unused weights that impact initial page load performance.
If you only need the weights you're actually using, specify them explicitly:
Suggested optimization
- href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" + href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap"Alternatively, if there's a possibility of using additional weights in the future, the current variable font approach is acceptable. The preconnect hints and
display=swapparameter are correctly configured.
| body { | ||
| margin: 0; | ||
| font-family: 'Outfit', sans-serif; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Consolidate font-family into the existing body selector.
This creates a duplicate body selector (lines 93-95 already define a body rule inside @layer base). Duplicating selectors violates the DRY principle and increases maintenance burden.
Additionally, margin: 0 is redundant—Tailwind's preflight (included via @tailwind base) already resets body margins.
Consider these idiomatic approaches for Tailwind projects:
Option 1 (Recommended): Extend Tailwind theme configuration
Add Outfit to your Tailwind config file (tailwind.config.js or tailwind.config.ts):
export default {
theme: {
extend: {
fontFamily: {
sans: ['Outfit', 'sans-serif'],
},
},
},
}Then remove lines 113-116 entirely. Tailwind will apply Outfit as the default sans-serif font through the existing @apply directives.
Option 2: Modify the existing body rule
If you prefer explicit CSS, consolidate into the existing @layer base body selector:
@layer base {
* {
@apply border-border;
}
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground;
+ font-family: 'Outfit', sans-serif;
}
}
-
-body {
- margin: 0;
- font-family: 'Outfit', sans-serif;
-}🤖 Prompt for AI Agents
frontend/src/index.css lines 113-116: duplicate body selector defines margin:0
and font-family which duplicates the existing @layer base body rule and Tailwind
preflight; remove these lines and either (preferred) add Outfit to Tailwind
config by extending theme.fontFamily.sans and rely on the existing base rule, or
(alternate) move only the font-family into the existing @layer base body
selector (do not re-add margin:0 since Tailwind preflight already resets it).
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/tailwind.config.js (1)
3-65: Reformatting is fine but extensive.The file has been reformatted with spacing and indentation changes throughout. While these changes don't affect functionality, they make the diff larger. Consider using a formatter consistently to avoid mixing formatting changes with functional changes in future PRs.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/index.htmlfrontend/tailwind.config.js
🔇 Additional comments (3)
frontend/tailwind.config.js (1)
10-12: LGTM! Proper Tailwind font configuration.The
fontFamily.sansextension correctly adds Outfit as the primary sans-serif font. This will apply Outfit globally to all elements using Tailwind's default sans font stack (which is most elements by default).frontend/index.html (2)
1-1: DOCTYPE normalization is fine.Uppercase
<!DOCTYPE html>is the standard convention.
20-20: The Google Identity script is actively used in the authentication system and is related to this PR.The script is required for Google Sign-In functionality, which is implemented in
frontend/src/Pages/Authentication/forms.tsxusinggoogle.accounts.id.initialize()andgoogle.accounts.id.renderButton(). Type definitions are also defined infrontend/src/types/google.d.ts. This is an initial commit setting up the entire project structure, not merely a font change PR, so the script is a necessary and integral part of the project setup.Likely an incorrect or invalid review comment.
frontend/index.html
Outdated
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" | ||
| rel="stylesheet" | ||
| /> |
There was a problem hiding this comment.
Remove duplicate font loading blocks.
Lines 4-9 and 11-16 are identical duplicates of the Google Fonts preconnect and stylesheet links. This causes unnecessary redundancy in the HTML and may lead to duplicate network requests (though modern browsers typically deduplicate).
🔎 Proposed fix: Remove the duplicate block
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
- <link rel="preconnect" href="https://fonts.googleapis.com" />
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- <link
- href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"
- rel="stylesheet"
- />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In frontend/index.html around lines 4 to 16 there are two identical Google Fonts
preconnect and stylesheet blocks (lines 4-9 and 11-16); remove the duplicate
block (delete the second occurrence, lines 11-16) so only one set of <link
rel="preconnect"> and the single <link href="...Outfit..."> stylesheet remains,
keeping the existing <meta charset="UTF-8" /> intact in the first block.
2 participants
Description
Applies the Outfit font globally across the frontend for consistent typography.
Changes
Closes #170 #173
Summary by CodeRabbit
Style
Performance
✏️ Tip: You can customize this high-level summary in your review settings.