Shopify theme development

[stijns96]

📚 What are you trying to do?

For our Shopify theme development we'd like to see if we could implement this. We have a src and dist folder and have build our own CLI to parse all the files. Js is done with Rollup, CSS and Tailwind with PostCSS and other files simply with a copy.

As far as I know this is not the ideal situation to implement Fontaine, but I'm not pretty sure if it's even doable at this point.

Any thoughts on this? Since we've build our own CLI (just some JS files), I can easily plug it in.

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[jpsc]

Hello @stijns96, I'm really not sure exactly what you are trying todo but if you want to integrate fontaine with rollup it should be compatible as vite uses rollup and fontaine is supported by vite.

[stijns96]

Hi @jpsc,

Thanks for your reply!

I’m aware that Vite uses Rollup under the hood, which is why I figured it might be doable. But since we’re not using Vite—just Rollup directly for JS and PostCSS separately for CSS/Tailwind—I’m not entirely sure what the expected output of Fontaine is, or how best to integrate it.

A few things I’m wondering:

• Can Fontaine be used as a standalone Rollup plugin or PostCSS plugin?
• Does it output CSS (e.g. with font metrics and fallbacks), or modify fonts/assets directly?
• And where would it make the most sense to integrate it in a non-Vite setup—during CSS processing, as part of Rollup, or in a separate step altogether?

If anyone has experience using Fontaine outside the Vite ecosystem (especially with Rollup and PostCSS handled independently), I’d really appreciate any pointers!

Thanks again!

// rollup.config.js
import { defineConfig } from 'rollup';
import fg from 'fast-glob';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import createAssetFilename from '@code-internet-applications/cbt-cli/utils/createAssetFilename.mjs';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import { FontaineTransform } from 'fontaine';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  input: fg.globSync(`src/assets/**/*.{js,ttf}`, {
    ignore: [`src/assets/js/_*/**/*.js`, `src/assets/js/**/_*.js`],
  }),
  perf: true,
  plugins: [
    nodeResolve(),
    alias({
      entries: [
        { find: 'modules', replacement: join(__dirname, 'src/assets/js/modules') },
        { find: 'services', replacement: join(__dirname, 'src/assets/js/services') },
        { find: 'utils', replacement: join(__dirname, 'src/assets/js/utils') },
      ],
    }),
    FontaineTransform.rollup({
      fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
      // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
      resolvePath: (id) => `file://${process.cwd()}/src/assets/public${id}`,
      // overrideName: (originalName) => `${name} override`
      // sourcemap: false
      // skipFontFaceGeneration: (fallbackName) => fallbackName === 'Roboto override'
    }),
  ],
  output: {
    dir: 'dist/assets',
    entryFileNames({ facadeModuleId }) {
      return createAssetFilename(facadeModuleId, `${process.cwd()}/src/assets/js`);
    },
  },
});

Extra context

Our @font-faces are stored in a html-head-fonts.liquid file due to how Shopify handles asset_urls.

{%- style -%}
  @font-face {
    font-family: 'Roboto';
    src: url("{{ 'roboto-variable-font-wdth-wght.ttf' | asset_url }}") format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Roboto';
    src: url("{{ 'roboto-italic-variable-font-wdth-wght.ttf' | asset_url }}") format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter';
    src: url("{{ 'inter-variable-font-opsz-wght.ttf' | asset_url }}") format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter';
    src: url("{{ 'inter-italic-variable-font-opsz-wght.ttf' | asset_url }}") format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
{%- endstyle -%}