AOSSIE-Org / AOSSIE-Org/EduAid

Improve UX by Using Poppins Google Font in Web App

未关闭
#193 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
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 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。