AOSSIE-Org / AOSSIE-Org/EduAid

Improve UX by Using Poppins Google Font in Web App

Đang mở
#193 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
171
Fork
425
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

**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.

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.