fix: add Poppins Google Font for improved UX (#193)#635
Conversation
📝 WalkthroughWalkthroughThe pull request updates two CSS files to import the Poppins font from Google Fonts and configures the application to use Poppins as the primary font family. This replaces the system-based font stack with a custom, web-optimized typeface. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 (2)
eduaid_web/src/App.css (1)
40-40: Consider adding a newline at end of file.Most style guides and linters recommend adding a trailing newline at the end of files. While this is a minor stylistic issue, it helps maintain consistency across the codebase.
📝 Proposed fix
} +🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@eduaid_web/src/App.css` at line 40, The file eduaid_web/src/App.css ends with a closing brace '}' but lacks a trailing newline; update the file by adding a single newline character at the end of the file so the file terminates with a newline (ensure the final character after the last '}' is a newline).eduaid_web/src/index.css (1)
1-2: Consider using the modern@importnotation.The static analysis tool recommends using
@import 'url'notation instead of@import url()for consistency with modern CSS best practices.♻️ Proposed fix for import notation
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); +@import 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap';Note: Both syntaxes are valid CSS, but the direct string notation is more concise.
As per static analysis hints, the
import-notationrule suggests using the string notation directly.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@eduaid_web/src/index.css` around lines 1 - 2, Update the font import to use the modern string `@import` notation instead of the url() function; locate the existing `@import` rule (the Poppins Google Fonts import) and replace the current `@import` url('https://fonts.googleapis.com/...') form with the concise `@import` 'https://fonts.googleapis.com/...'; keeping the exact URL query string intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@eduaid_web/src/App.css`:
- Around line 1-2: Remove the duplicate Poppins font import from App.css to
avoid redundant network requests (the font is already imported in index.css); if
you must keep a local import here instead, change the syntax to the recommended
form using `@import`
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
and ensure only one stylesheet performs the global font import.
---
Nitpick comments:
In `@eduaid_web/src/App.css`:
- Line 40: The file eduaid_web/src/App.css ends with a closing brace '}' but
lacks a trailing newline; update the file by adding a single newline character
at the end of the file so the file terminates with a newline (ensure the final
character after the last '}' is a newline).
In `@eduaid_web/src/index.css`:
- Around line 1-2: Update the font import to use the modern string `@import`
notation instead of the url() function; locate the existing `@import` rule (the
Poppins Google Fonts import) and replace the current `@import`
url('https://fonts.googleapis.com/...') form with the concise `@import`
'https://fonts.googleapis.com/...'; keeping the exact URL query string intact.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0be15075-c10c-4303-b4e6-306495dae8c4
📒 Files selected for processing (2)
eduaid_web/src/App.csseduaid_web/src/index.css
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | ||
|
|
There was a problem hiding this comment.
Remove duplicate font import to avoid redundant network requests.
The Poppins font is already imported in eduaid_web/src/index.css (line 1), which serves as the global entry-point stylesheet. Since index.css is loaded first via the main entry point and App.css is a component-level stylesheet, this creates a redundant double-fetch of the same font resource, negatively impacting performance.
Additionally, the static analysis tool flags that the import syntax should follow the @import 'url' notation instead of @import url() for consistency with modern CSS best practices.
⚡ Proposed fix: Remove the duplicate import from App.css
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-The font will still be available globally via the import in index.css.
If you prefer to keep the import here for any reason, then remove it from index.css instead. However, keeping it in the global stylesheet (index.css) is the recommended approach.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
🧰 Tools
🪛 Stylelint (17.5.0)
[error] 1-1: Expected "url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap')" to be "'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'" (import-notation)
(import-notation)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@eduaid_web/src/App.css` around lines 1 - 2, Remove the duplicate Poppins font
import from App.css to avoid redundant network requests (the font is already
imported in index.css); if you must keep a local import here instead, change the
syntax to the recommended form using `@import`
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
and ensure only one stylesheet performs the global font import.
1 participant
Fixes #193
Changes
Preview
Font applied globally across all pages of the web app.
Summary by CodeRabbit