Adding custom fonts to your Ember app with Fontsource

If you're running a modern Ember app with Embroider and Vite, adding custom fonts is easy. Fontsource is a good way to do it: fonts are packaged as npm dependencies, so you get versioned, self-hosted fonts with zero config on the bundler side. Here's how it works in practice. Install the font packages Pick the fonts you need from fontsource.org and install them: pnpm add @fontsource/geist @fontsource/geist-mono Import the CSS In your app/app.css (or wherever your main stylesheet lives), import the weights you actually use: @import "@fontsource/geist/400.css"; @import "@fontsource/geist/500.css"; @import "@fontsource/geist/600.css"; @import "@fontsource/geist/700.css"; @import "@fontsource/geist-mono/400.css"; @import "@fontsource/geist-mono/500.css"; Each of these CSS files contains the @font-face declarations for that specific weight. The font files (woff2) ship as part of the npm package and Vite resolves them automatically. Only import the weights you use. Every weight you add is an