Self-Hosted Fonts

For production environments, it’s recommended to self-host Font Awesome fonts instead of relying on a CDN. This gives you better control, improved performance, and works offline.

Why Self-Host?

Better Performance - No external network requests
Offline Support - Works without internet connection
Version Control - Lock to specific Font Awesome version
Privacy - No external tracking or analytics
Reliability - No dependency on third-party CDN uptime

Setup Steps

1. Download Font Awesome

Download Font Awesome from the official website or install via npm:

npm install @fortawesome/fontawesome-free

2. Copy Font Files

Copy the Font Awesome CSS file to your project’s public directory:

your-project/
├── public/
│   └── fonts/
│       └── font-awesome/
│           ├── all.min.css
│           └── webfonts/
│               ├── fa-solid-900.woff2
│               ├── fa-regular-400.woff2
│               ├── fa-brands-400.woff2
│               └── ... (other font files)

If using npm package:

# Copy CSS
cp node_modules/@fortawesome/fontawesome-free/css/all.min.css public/fonts/font-awesome/

# Copy webfonts directory
cp -r node_modules/@fortawesome/fontawesome-free/webfonts public/fonts/font-awesome/

3. Update CSS Path

Make sure the CSS file can find the fonts. The all.min.css should reference fonts like:

@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("webfonts/fa-solid-900.woff2") format("woff2");
}

If the paths don’t match your structure, you may need to adjust them.

4. Use Self-Hosted Path

When initializing Font Awesome for Phaser, pass the path to your CSS file:

import { loadFont } from 'font-awesome-for-phaser';
import { Game } from 'phaser';

// Load from your public directory
loadFont('/fonts/font-awesome/all.min.css').then(() => {
  new Game(config);
});

Or with async/await:

async function startGame() {
  await loadFont('/fonts/font-awesome/all.min.css');
  new Game(config);
}

startGame();

Project Structure Examples

Vite Project

my-game/
├── public/
│   └── fonts/
│       └── font-awesome/
│           ├── all.min.css
│           └── webfonts/
│               └── ...
├── src/
│   └── main.ts
└── index.html

await loadFont('/fonts/font-awesome/all.min.css');

Webpack Project

my-game/
├── public/
│   └── assets/
│       └── fonts/
│           ├── all.min.css
│           └── webfonts/
│               └── ...
└── src/
    └── index.ts

await loadFont('/assets/fonts/all.min.css');

React + Phaser

my-game/
├── public/
│   └── fontawesome/
│       ├── all.min.css
│       └── webfonts/
│           └── ...
└── src/
    └── components/
        └── Game.tsx

useEffect(() => {
  loadFont('/fontawesome/all.min.css').then(() => {
    // Initialize game
  });
}, []);

Build Tool Integration

Copying Files During Build

Vite

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
          dest: 'fonts/font-awesome',
        },
        {
          src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
          dest: 'fonts/font-awesome',
        },
      ],
    }),
  ],
});

Webpack

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
          to: 'fonts/font-awesome',
        },
        {
          from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
          to: 'fonts/font-awesome/webfonts',
        },
      ],
    }),
  ],
};

Optimization Tips

1. Use Subset Fonts

If you’re only using a few icons, create a custom subset to reduce file size:

# Use Font Awesome's subsetter tool
# https://fontawesome.com/docs/web/setup/host-yourself/webfonts#subsetting

2. Preload Fonts

Add preload links in your HTML for faster loading:

<head>
  <link rel="preload" href="/fonts/font-awesome/webfonts/fa-solid-900.woff2"
        as="font" type="font/woff2" crossorigin>
</head>

3. Use Specific Style Files

Instead of all.min.css, load only the styles you need:

// Only load solid icons
await loadFont('/fonts/font-awesome/solid.min.css');

4. Gzip/Brotli Compression

Enable compression on your server for the CSS and font files.

Troubleshooting

Fonts Not Loading

Check the path - Verify the CSS file is accessible at the URL you provided
Check CORS - If fonts are on a different domain, ensure CORS headers are set
Check console - Look for 404 errors or font loading failures
Verify file structure - Ensure webfonts folder is in the correct location relative to CSS

Font Face Errors

If you see “Failed to load font-face” errors:

Check that webfonts directory is accessible
Verify the CSS references the correct webfonts path
Ensure font files weren’t corrupted during copy

Build Errors

If fonts don’t work after build:

Verify files are copied to the build output
Check that paths are correct in production build
Ensure public directory is properly configured in your build tool

Production Checklist

Font Awesome files copied to public directory
CSS and webfonts paths match
loadFont() called with correct path
Files included in build output
Fonts loading correctly in production
Browser console shows no errors
Icons displaying properly

Next Steps

Review the API Reference
Explore Icon Styles
Check IconText Component usage