AOSSIE-Org / AOSSIE-Org/EduAid

Improve UX by Using Poppins Google Font in Web App

Aperta
#193 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
171
Fork
425
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.