Skip to content

fix: prevent render-blocking Font Awesome fonts using local loading #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
hitesh-kumar123 merged 1 commit into from
Jan 11, 2026
Merged

fix: prevent render-blocking Font Awesome fonts using local loading #71

hitesh-kumar123 merged 1 commit into from
Jan 11, 2026
+22 −9

Conversation

@pratik-corn
Copy link
Contributor

@pratik-corn pratik-corn commented Jan 6, 2026 •
edited
Loading

📦 Pull Request

📌 Linked Issue

🛠 Changes Made

  • Added: Installed Font Awesome locally using @fortawesome/fontawesome-free.
  • Added: Copied required Font Awesome webfonts into the public/fonts/fontawesome/ directory to serve fonts locally.
  • Added: Custom fontawesome.css with @font-face declarations.
  • Updated: Applied font-display: swap to Font Awesome font definitions to eliminate FOIT.
  • Updated: Modified application entry point to load local Font Awesome CSS instead of CDN.
  • Fixed: Removed dependency on external Font Awesome CDN to avoid render-blocking requests.
  • Improved: First Contentful Paint (FCP) by ensuring fonts load asynchronously and are cacheable.

🧪 Testing

Manual Testing (Chrome DevTools)

  • Test case 1:
    Steps:

    1. Ran the application locally using npm start.
    2. Opened Chrome DevTools → Network tab → Filtered by Font.

    Expected Result:
    Font Awesome .woff2 files should load from local paths without errors.

    Actual Result:
    ✔ fa-solid-900.woff2 and fa-brands-400.woff2 loaded successfully from local server with HTTP 304 status.

  • Test case 2:
    Steps:

    1. Reloaded the page with cache enabled.
    2. Observed request waterfall and performance timings.

    Expected Result:
    Fonts should not block rendering and should be cached.

    Actual Result:
    ✔ Fonts loaded after DOMContentLoaded, were cached correctly, and did not block initial render.

📸 UI Changes

Before After
N/A N/A

(No visual UI changes; performance and loading behavior improvement only.)

📸 Performance Comparison (Before vs After)

Before (CDN Font Blocking) After (Local Fonts + font-display: swap)
image image

📝 Documentation Updates

  • Updated internal setup documentation (Font Awesome local usage).
  • Added inline comments explaining font loading strategy.

✅ Checklist

  • Created a new branch for this PR
  • Have starred the repository
  • Follows JavaScript Styleguide
  • No console warnings or errors
  • Commit messages follow Git Guidelines

💡 Additional Notes

  • This PR eliminates Flash of Invisible Text (FOIT) by using font-display: swap.
  • Fonts are now served locally, reducing reliance on third-party CDNs.
  • Network analysis confirms improved performance and caching behavior.
  • This change improves Lighthouse performance metrics, especially First Contentful Paint (FCP) and Best Practices scores.

fix: prevent render-blocking Font Awesome fonts using local loading
b4b0ad1 
- Install Font Awesome locally instead of using CDN
- Serve webfonts from public directory
- Add font-display: swap to eliminate FOIT
- Improve First Contentful Paint (FCP) by avoiding blocking font loads
@netlify
Copy link

netlify bot commented Jan 6, 2026 •
edited
Loading

✅ Deploy Preview for smartrentsystem ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit b4b0ad1
🔍 Latest deploy log https://app.netlify.com/projects/smartrentsystem/deploys/695cfe04d659480008b3ee52
😎 Deploy Preview https://deploy-preview-71--smartrentsystem.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pratik-corn
Copy link
Contributor Author

pratik-corn commented Jan 7, 2026

@hitesh-kumar123 , please review and primarily merge my PR

@hitesh-kumar123 hitesh-kumar123 added good first issue Good for newcomers SWoC26 Issues and tasks related to Social Winter of Code (SWoC) contributions. Easy labels Jan 11, 2026
@hitesh-kumar123 hitesh-kumar123 merged commit 820c6cf into hitesh-kumar123:main Jan 11, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hitesh-kumar123 hitesh-kumar123 hitesh-kumar123 approved these changes

Assignees

@pratik-corn pratik-corn

Labels

Easy good first issue Good for newcomers SWoC26 Issues and tasks related to Social Winter of Code (SWoC) contributions.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pratik-corn @hitesh-kumar123