rising-crimson

Best way to include fonts?

I am importing

import "@fontsource-variable/roboto";

import "@fontsource-variable/roboto";

on __root but this leads to the font not being available in stack. What is the recommended way to use fonts? thanks!

19 Replies

rising-crimsonOP•6mo ago

There is this guide, but moving the import to the css does not fix the issue: https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js#fonts

Migrate from Next.js | TanStack Start React Docs

[!IMPORTANT] This guide is based on the upcoming work in the alpha branch of TanStack Start. We are actively working on exciting new features, and this guide will be updated soon. This guide provides...

rising-crimsonOP•6mo ago

For now Im fixing it like this:

  server: {
    port: 4200,
    host: "localhost",
    fs: {
      allow: [
        searchForWorkspaceRoot(process.cwd()),
        "/node_modules/.pnpm/@fontsource-variable+roboto@5.2.6/node_modules/@fontsource-variable/roboto/files"
      ]
    }
  },

  server: {
    port: 4200,
    host: "localhost",
    fs: {
      allow: [
        searchForWorkspaceRoot(process.cwd()),
        "/node_modules/.pnpm/@fontsource-variable+roboto@5.2.6/node_modules/@fontsource-variable/roboto/files"
      ]
    }
  },

but this feels very brittle, and annoying to mantain, since it will break with every release of the font

eastern-cyan•6mo ago

why you dont use tailwindcss and css ?

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');

:root {
--font-geist-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@theme inline {
  --font-geist: var(--font-geist-sans);
  --font-geist-mono: var(--font-geist-mono);

  --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');

:root {
--font-geist-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@theme inline {
  --font-geist: var(--font-geist-sans);
  --font-geist-mono: var(--font-geist-mono);

  --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

 <body>
        <div className="relative flex min-h-screen flex-col font-sans antialiased">
          {children}
        </div>
        <Scripts />
      </body>

 <body>
        <div className="relative flex min-h-screen flex-col font-sans antialiased">
          {children}
        </div>
        <Scripts />
      </body>

  head: () => ({
    meta: createMetadata({
      charSet: 'utf-8',
      viewport: {
        'width': 'device-width',
        'initial-scale': '1',
        'maximum-scale': '1',
        'user-scalable': 'no',
        'viewport-fit': 'cover',
      },
    }),
    links: [
      { rel: 'stylesheet', href: appStyles },
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap&display=swap',
      },
    ],
  }),

  head: () => ({
    meta: createMetadata({
      charSet: 'utf-8',
      viewport: {
        'width': 'device-width',
        'initial-scale': '1',
        'maximum-scale': '1',
        'user-scalable': 'no',
        'viewport-fit': 'cover',
      },
    }),
    links: [
      { rel: 'stylesheet', href: appStyles },
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap&display=swap',
      },
    ],
  }),

rising-crimsonOP•6mo ago

Loading the fonts from google is somewhat sketchy since it gives google information I'd prefer not to give if I can avoid. IE, I prefer to self host my fonts Using the self hosted fonts in CSS / tailwind, leads to the same error.

eastern-cyan•6mo ago

btw there is also: https://github.com/unjs/fontaine What happens if you place the fonts in "public/fonts" for example? It should correctly resolve i think

rising-crimsonOP•6mo ago

yes, but i would have to download them, and not rely on npm. I'm happy to leave someone that responsability 😅

eastern-cyan•6mo ago

I mean, fonts dont really change that often for that effort tbh :p

other-emerald•6mo ago

I'm importing the font from fontsource in the __root.tsx file and its working. I tried also with tailwind, no issue

rising-crimsonOP•6mo ago

are you already devinxed?

other-emerald•6mo ago

yes I tried on a fresh install

rising-crimsonOP•6mo ago

I see, wonder what im doing wrong or missing

other-emerald•6mo ago

This is all I'm doing to make it work:

// __root.tsx
import '@fontsource-variable/roboto';
import '@fontsource/ibm-plex-mono';
import appCSS from "~/styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },

    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCSS,
      }
    ]
  }),
  component: RootComponent,
})

// __root.tsx
import '@fontsource-variable/roboto';
import '@fontsource/ibm-plex-mono';
import appCSS from "~/styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },

    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCSS,
      }
    ]
  }),
  component: RootComponent,
})

/* app.css */
@import "tailwindcss" source("../");

@theme {
  --font-mono: 'IBM Plex Mono', sans-serif; /* work also with 'Roboto Variable' */
}

/* this works too */
body {
  font-family:  'IBM Plex Mono', sans-serif;
}

/* app.css */
@import "tailwindcss" source("../");

@theme {
  --font-mono: 'IBM Plex Mono', sans-serif; /* work also with 'Roboto Variable' */
}

/* this works too */
body {
  font-family:  'IBM Plex Mono', sans-serif;
}

foreign-sapphire•2w ago

anyone got a success with setting up custom font?

unwilling-turquoise•2w ago

@marko can you share a project that shows what you tried so far so we can help debug this?

foreign-sapphire•2w ago

ah sorry for the noise, works perfect, note to myself I shouldn't code more then 10 hours per day 😄

unwilling-turquoise•2w ago

want to create an example for the router/start repo?

foreign-sapphire•2w ago

would love to, as soon as I acquire some free time 🤞 It basically works as written here https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js#fonts but I guess it would be a bit better if this topic/chapter was also mentioned somewhere else in the docs, since it doesn't apply to nextjs migration only. in my case whole tanstack project it's setup in docker, and I forgot to rebuild container when I added font as npm package

foreign-sapphire•2w ago

it works great btw, most of the pages are scored 100 🥳

unwilling-turquoise•2w ago

very nice

Gaming

Programming

Best way to include fonts?

Did you find this page helpful?