T
TanStack•3mo ago
adverse-sapphire

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!
12 Replies
adverse-sapphire
adverse-sapphireOP•3mo 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...
adverse-sapphire
adverse-sapphireOP•3mo 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
ratty-blush
ratty-blush•3mo 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',
      },
    ],
  }),
adverse-sapphire
adverse-sapphireOP•3mo 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.
ratty-blush
ratty-blush•3mo 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
adverse-sapphire
adverse-sapphireOP•3mo ago
yes, but i would have to download them, and not rely on npm. I'm happy to leave someone that responsability 😅
ratty-blush
ratty-blush•3mo ago
I mean, fonts dont really change that often for that effort tbh :p
passive-yellow
passive-yellow•3mo ago
I'm importing the font from fontsource in the __root.tsx file and its working. I tried also with tailwind, no issue
adverse-sapphire
adverse-sapphireOP•3mo ago
are you already devinxed?
passive-yellow
passive-yellow•3mo ago
yes I tried on a fresh install
adverse-sapphire
adverse-sapphireOP•3mo ago
I see, wonder what im doing wrong or missing
passive-yellow
passive-yellow•3mo 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;
}

Did you find this page helpful?