Custom fonts/static assets

[mikefrancis]

Hey there,

Thanks for making Playroom.

I'd like to serve up some local fonts to use from within Playroom but can't find any docs on how to do this.

Is it possible?

[michaeltaranto]

Hey 👋

I would recommend doing this with a custom FrameComponent.

Here is a basic example:

// FrameComponent.tsx

export default ({ children }) => {
  return (
    <>
      <link href="---web font url---" rel="stylesheet" />
      {children}
    </>
  );
}

And then provide the path of that file to your playroom config:

// playroom.config.js

module.exports = {
  // ...
  frameComponent: './FrameComponent.tsx'
}

[mikefrancis]

@michaeltaranto Thanks for the reply! Is there any way to host the fonts from the playroom dev server without these being served from the public web?

[michaelwarren1106]

I've been trying to use a custom frame component to remove the margin on the iframe element body tag, etc

I did exactly what you suggest above (copy and paste), and i've been getting:

my Frame.tsx is:

export default ({ children }) => {
  return (
    <>
      <link href="---web font url---" rel="stylesheet" />
      {children}
    </>
  );
}

[mikefrancis]

@michaelwarren1106 You'll need to add a CSS loader to your webpack config:

// playroom.config.js

module.exports = {
  // ...
  webpackConfig: () => ({
    module: {
      rules: [
        {
          test: /\.css$/,
          exclude: /node_modules/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
  },
  // ...
};