-
Notifications
You must be signed in to change notification settings - Fork 25.6k
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.
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
Load Font Awesome CSS from jsDelivr CDN #2583
Conversation
If you dislike dependencies on external services, Font Awesome themselves provides CSS-based usage on https://use.fontawesome.com/releases/v5.13.1/css/all.css However I can't find a way to automatically track the latest releases in this way (jsDelivr can). |
This is why I moved to their newer kit feature so I didn't have to constantly bump the dependency since the version number was tied to URL. The other consideration was I specifically went with their SVG solution, as that was at the time the new and preferred installed method. Web fonts have sort of fallen out of favor, though I guess that might not hold much water since the project is called "FontAwesome" and still the primary way its used. My understanding is the JavaScript rewrites the |
I don't think they make any visual / practical difference, as even the official FA docs says (bottom of the page):
So for end users both methods of loading should be equivalent. And yes, the JS version does rewrite the |
I didn't think it made any visual differences, it was more of a use SVG or webfonts for icons debate and if one was more performant, accessible, etc. Since the SVGs aren't getting inlined into the source HTML I don't think it matters much, so I'm fine with going back to the webfont/CSS solution for icons. |
* Load Font Awesome CSS from jsDelivr CDN * Update CHANGELOG and history
As a follow-up: I just noticed that FA's official kits also have a "latest" reference, for example: <link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<!-- or -->
<script type="text/javascript" href="https://kit-free.fontawesome.com/releases/latest/js/free.min.js"> FA's official CDN is based on StackPath, which may be faster or slower. As far as I am concerned, StackPath is also one of the supporters of jsDelivr, so logically jsDelivr shouldn't be slower or less stable than SP. |
This changes broke the option to use a self-hosted font-awesome version which is always a topic when looking into privacy issues and analysing the page quality (e.g with dareboost.com). It's also a feature several users might have used int he past (see #2298). Would be great to have that functionality back without the need to overwrite |
* Load Font Awesome CSS from jsDelivr CDN * Update CHANGELOG and history
* Load Font Awesome CSS from jsDelivr CDN * Update CHANGELOG and history
* Load Font Awesome CSS from jsDelivr CDN * Update CHANGELOG and history
This is an enhancement or feature.
Summary
Instead of using Font Awesome Kits, load its CSS from jsDelivr CDN.
Why?
✔ Font Awesome official source and NPM package
✔ Always up-to-date with latest FA 5 icon sets
✔ Faster everywhere (jsDelivr is the largest public NPM CDN, also works in China)
✔ Loads fewer bytes ([230 KB original, 184 KB gzipped] vs [1.2 MB original, 457 KB gzipped])
✔ No bothering with
async
and/ordefer
. Always loaded asynchronously and displayed as soon as it's ready✔ Works with ads blocker
✔ Works even with JavaScript disabled
Context
Potentially related: #413