AOSSIE-Org / AOSSIE-Org/EduAid
Improve UX by Using Poppins Google Font in Web App
- 主要语言
- JavaScript
- 星标
- 171
- 派生
- 425
- PR 合并指标
- 30 天内没有已合并 PR
描述
**Description:**
Currently, the application uses the following system-based font stack:
```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
```
While this provides decent compatibility, it lacks a consistent and modern UI feel. I propose replacing it with the **Poppins** font from Google Fonts to enhance the user experience and make the application visually appealing.
### **Benefits of Using Google Fonts**
✅ **Consistent Design** – Ensures a unified appearance across different browsers and devices.
✅ **Modern & Clean Look** – Improves readability and makes the UI more attractive.
✅ **Better UX** – A well-designed font enhances user engagement and makes the interface feel professional.
✅ **Performance Optimization** – Google Fonts are optimized for web usage and load efficiently.
### **Cons of System-Based Fonts**
❌ Inconsistent Appearance – The UI may look slightly different across devices (e.g., Windows uses Segoe UI, while macOS uses San Francisco).
❌ Lack of Branding – Doesn't create a unique or visually distinct look for your web app.
❌ Not Always Aesthetic – Some system fonts may not be as modern or sleek as custom fonts.
### **Proposed Solution:**
1. Import the Poppins font from Google Fonts in the global CSS file:
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
```
2. Apply the Poppins font globally:
```css
body {
font-family: 'Poppins', sans-serif;
}
```
### **Additional Notes:**
- This change will improve the overall aesthetics of the app.
- I am interested in working on this issue and submitting a PR.
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。