Fonts Guide

[ayuhito]

A lot of other frameworks (Astro, Next.js, Qwik, etc.) have a guide on the "blessed" practices of importing fonts. A short guide on importing Google Fonts, Fontsource (I maintain this), custom fonts and extras such as preloading would be helpful for new developers.

I'd love to make a PR on this but I just wanted a go ahead from the Remix team before doing so. 👍

[nikolailehbrink]

Since many developers seem to be looking for guidance on this, I put together my own font implementation guide for Remix and React Router 7. It covers everything @ayuhito brought up here (thanks again for maintaining Fontsource!), except Google Fonts—that part is already well-handled in the starter template, I think.

You can check it out here, hope it helps: The missing guide to fonts in Remix.run and React Router 7

[monolithed]

I think what's needed here isn't a guide, but font management, that layer is simply missing right now. Here's how easily a font is connected in Next.js:

import {Inter} from 'next/font/google';

const inter = Inter({
    subsets: ['latin', 'cyrillic'],
    variable: '--font-inter',
    weight: ['400', '500', '600',  '800'],
    display: 'optional',
    fallback: ['Helvetica', 'Arial', 'sans-serif']
});