Kits, CDN and self-hosting

Create and configure a kit, understand what the kit script does at runtime, handle CSP, and self-host either the web fonts or the SVG sprite.

What a kit actually is

<!-- A kit is a hosted bundle you configure in a web UI, loaded by one script. -->
<script src="https://kit.fontawesome.com/a1b2c3d4e5.js" crossorigin="anonymous"></script>

<!-- The script then:
     1. detects the icons referenced in your markup,
     2. fetches the matching font or SVG data from the CDN,
     3. injects a <style> element with the rules it needs.
     Nothing is present until it runs, which is why the icons appear late. -->

CSP and network behaviour

// The kit loads from kit.fontawesome.com and, by default, also from
// ka-p.fontawesome.com for the actual assets. A Content-Security-Policy
// must allow both.
//
// Example policy for a kit-based setup:
//
// script-src  'self' https://kit.fontawesome.com;
// style-src   'self' 'unsafe-inline' https://ka-p.fontawesome.com;
// font-src    'self' https://ka-p.fontawesome.com data:;
// img-src     'self' data:;
//
// The 'unsafe-inline' for style-src is needed because the kit injects a
// <style> element at runtime. That is one of the strongest arguments for
// self-hosting: with a self-hosted stylesheet you need no inline styles.

// Restricting a kit to specific origins (a kit setting) stops someone
// else embedding your kit on their site, which would consume your quota.

// Detecting that the kit failed to load, so the interface does not silently
// lose its icons:
const hasFA = await new Promise((resolve) => {
  const check = (attempt = 0) => {
    if (document.fonts?.check('900 16px "Font Awesome 7 Free"')) return resolve(true);
    if (document.querySelector('svg[data-fa-i2svg]')) return resolve(true);
    if (attempt > 10) return resolve(false);
    setTimeout(() => check(attempt + 1), 150);
  };
  check();
});

if (!hasFA) document.documentElement.classList.add('no-icons');
// and in CSS: .no-icons .icon { display: none; }  or a text fallback

Self-hosting

# Web fonts: copy the webfonts folder and the stylesheet, then rewrite the paths.
npm install @fortawesome/fontawesome-free

mkdir -p public/vendor/fontawesome/webfonts
cp node_modules/@fortawesome/fontawesome-free/webfonts/* public/vendor/fontawesome/webfonts/
cp node_modules/@fortawesome/fontawesome-free/css/solid.min.css public/vendor/fontawesome/
cp node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css public/vendor/fontawesome/

# The shipped CSS references ../webfonts/, which is exactly the layout above.

/* If you must move the fonts, rewrite the src URLs in one place. */
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;              /* avoid a flash of a fallback glyph */
  src: url("/vendor/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
       url("/vendor/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}

/* font-display: block is deliberate here: an icon that briefly shows a box or
   a fallback character looks broken, and the font is small enough that a short
   block period is better than a substituted glyph. */

<!-- The SVG sprite route: one file, referenced with <use>. -->
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="fa-cart" viewBox="0 0 576 512">
    <path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24z"/>
  </symbol>
</svg>

<svg class="icon" width="16" height="16" aria-hidden="true" focusable="false">
  <use href="#fa-cart"></use>
</svg>

• The sprite route ships only the paths you reference, which is far smaller than any web font file, and there is no FOUT because the geometry is in the markup.
• A self-hosted web font blocks a first paint if it is loaded without font-display; with block there is a short invisible period instead of a visible box.
• Cache headers matter more than the file size for a font: it is immutable per version, so serve it with a long max-age and a hashed filename.
• Whatever route you choose, pin the version in the lockfile and commit the copied files. A silent minor upgrade can change a glyph's metrics and shift your layout.

FAQ

Related

Installing Font Awesome SVG with JavaScript: how it works and when to use it

Last refreshed 2026-09-18.